/* ddp_colors.css
   --------------------------------------------------------------------------
   DDP Gümrük Müşavirliği Kurumsal Palet + 3D (Depth) Token'ları
   -------------------------------------------------------------------------- */

   :root {
    /* Ana Logo Renkleri */
    --ddp-light-blue: #009ade; /* Logodaki canlı açık mavi */
    --ddp-dark-blue: #003a70;  /* Logodaki koyu lacivert */
  
    /* Nötrler */
    --ddp-black: #0b0f14;
    --ddp-white: #ffffff;
    --ddp-neutral-50: #f7f9fb;
    --ddp-neutral-100: #eef2f6;
    --ddp-neutral-200: #e3e9ef;
    --ddp-neutral-300: #cfd8e3;
    --ddp-neutral-600: #5b6b7a;
  
    /* Metin & Zemin */
    --primary-text-color: var(--ddp-dark-blue);
    --secondary-text-color: var(--ddp-black);
    --muted-text-color: var(--ddp-neutral-600);
    --link-color: var(--ddp-light-blue);
    --background-color: var(--ddp-neutral-50);
  
    /* Durumlar */
    --success: #21a366;
    --warning: #e6a700;
    --danger:  #c93c3c;
    --info:    #2f80ed;
  
    /* Boyut & Tipografi */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
  
    --gap-1: .35rem;
    --gap-2: .6rem;
    --gap-3: .9rem;
    --gap-4: 1.2rem;
  
    --font-sans: ui-sans-serif, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", system-ui, sans-serif;
    --fs-xxs: .75rem;
    --fs-xs:  .8rem;
    --fs-sm:  .9rem;
    --fs-md:  1rem;
  
    /* 3D Işık & Gölge Sistemi (üstten-sol ışık varsayımı) */
    --key-shadow: 0 18px 28px -12px rgba(13, 61, 110, .35);
    --ambient-shadow: 0 6px 16px rgba(13, 61, 110, .12);
    --bevel-top: inset 0 1px 0 rgba(255,255,255,.65);
    --bevel-bottom: inset 0 -1px 0 rgba(0,0,0,.10);
    --bevel-soft: inset 0 1px .5px rgba(255,255,255,.45), inset 0 -1px .5px rgba(0,0,0,.08);
  
    /* Elevation katmanları */
    --elev-1: var(--bevel-top), var(--bevel-bottom), 0 1px 2px rgba(13,61,110,.08);
    --elev-2: var(--bevel-top), var(--bevel-bottom), 0 2px 6px rgba(13,61,110,.12), 0 10px 18px -10px rgba(13,61,110,.18);
    --elev-3: var(--bevel-top), var(--bevel-bottom), var(--ambient-shadow), var(--key-shadow);
  
    /* Kenarlık & Yüzey */
    --border: 1px solid var(--ddp-neutral-200);
    --surface-grad: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
    --chat-sidebar-bg: #f5f7fb;
    --chat-main-bg: #ffffff;
    --chat-border-color: var(--ddp-neutral-200);
    --chat-bubble-in: #dff6ff;
    --chat-bubble-out: #f1f2f6;
  
    /* Layout */
    --sidebar-w: 232px;
    --sidebar-w-mini: 72px;
    --navbar-h: 48px;
  }
  
  /* --------------------------------------------------------------------------
     Global Baz
     -------------------------------------------------------------------------- */
  *,
  *::before,
  *::after { box-sizing: border-box; }
  
  html { height: 100%; }
  
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--primary-text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  h1, h2, h3 { color: var(--ddp-dark-blue); margin: 0 0 .6rem; line-height: 1.2; }
  h1 { font-size: 1.4rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }
  
  a { color: var(--link-color); text-decoration: none; }
  a:hover { text-decoration: underline; }
  
  /* Varsayılan buton renkleri (detaylar custom.css’te) */
  .btn-primary   { background-color: var(--ddp-dark-blue); color: var(--ddp-white); }
  .btn-secondary { background-color: var(--ddp-light-blue); color: var(--ddp-white); }
  .btn-info { background-color: var(--info);}
  .btn-light { background-color: var(--ddp-neutral-100); color: var(--ddp-dark-blue); }
  .btn-warning { background-color: var(--warning); color: var(--ddp-white); }
  .btn-danger { background-color: var(--danger); color: var(--ddp-white); }
  .btn-success { background-color: var(--success); color: var(--ddp-white); }
  .btn-outline-primary { border-color: var(--ddp-dark-blue); color: var(--ddp-dark-blue); }
  .btn-outline-secondary { border-color: var(--ddp-light-blue); color: var(--ddp-light-blue); }
  .btn-outline-info { border-color: var(--info); color: var(--info); }
  .btn-outline-warning { border-color: var(--warning); color: var(--warning); }
  /* --------------------------------------------------------------------------
     Sayfa Izgarası
     -------------------------------------------------------------------------- */
  .page-wrapper {
    display: grid;
    grid-template-areas:
      "sidebar navbar"
      "sidebar main";
    grid-template-rows: var(--navbar-h) 1fr;
    grid-template-columns: var(--sidebar-w) 1fr;
    height: 100vh;
    overflow: hidden;
  }
  .page-wrapper.is-mini { grid-template-columns: var(--sidebar-w-mini) 1fr; }
  /* Tamamen gizli durum */
  .page-wrapper.is-sidebar-hidden { grid-template-columns: 0 1fr; }
  
  /* Sidebar */
  .sidebar {
    grid-area: sidebar;
    color: #fff;
    overflow: hidden auto;
    border-right: var(--border);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08)),
      linear-gradient(180deg, #0f447c, #0a2f55);
    box-shadow: var(--elev-2);
  }
  .page-wrapper.is-sidebar-hidden .sidebar { display: none; }
  
  /* Mini mod: etiket gizle */
  .page-wrapper.is-mini .sidebar .nav-link .label { display: none; }
  .page-wrapper.is-mini .sidebar .nav-link { justify-content: center; gap: 0; }
  
  /* Navbar */
  .navbar {
    grid-area: navbar;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--navbar-h);
    padding: 0 .9rem;
    background: var(--surface-grad);
    border-bottom: var(--border);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.65),
      0 6px 14px rgba(13,61,110,.12);
    position: sticky; top: 0; z-index: 10;
  }

  /* Navbar sections */
  .navbar-left {
    flex: 1;
    min-width: 0; /* allow breadcrumb to truncate in one line */
    display: flex; align-items: center; gap: 1rem;
  }

  .navbar-center {
    flex: 1;
    display: flex; justify-content: center; align-items: center;
  }

  .navbar-right {
    flex: 1;
    display: flex; justify-content: flex-end; align-items: center;
  }

  /* Search container */
  .search-container {
    min-width: 250px;
    max-width: 350px;
  }

  .search-container .input-group {
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-1);
  }

  .search-container .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }

  .search-container .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
  }

  /* Responsive navbar search */
  @media (max-width: 768px) {
    .navbar-left {
      gap: 0.5rem;
    }

    .search-container {
      min-width: 200px;
      max-width: 250px;
    }

    .breadcrumb {
      font-size: 0.75rem;
    }
  }

  @media (max-width: 576px) {
    .navbar-left {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }

    .search-container {
      width: 100%;
      min-width: unset;
      max-width: unset;
    }

    .breadcrumb {
      margin-left: 0 !important;
      font-size: 0.7rem;
    }
  }
  
  /* İçerik */
  .main-content {
    grid-area: main;
    padding: var(--gap-3);
    background:
      linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3)),
      var(--ddp-neutral-50);
    overflow: auto;
  }
  /* Sidebar gizli iken içerik boşlukları uyumlasın */
  .page-wrapper.is-sidebar-hidden .main-content { padding-left: var(--gap-3); }
  
  /* Tam genişlik */
  .content-full { width: 100%; }
  
  /* Sidebar linkleri */
  .sidebar .nav-link {
    color: #d7e3f2;
    display: flex; align-items: center; gap: .65rem;
    padding: .45rem .7rem; margin: .25rem .5rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,.08);
    font-size: var(--fs-xs);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
    box-shadow: var(--elev-1);
    transition: transform .1s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .sidebar .nav-link:hover,
  .sidebar .nav-link.active {
    color: #fff;
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18));
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
  }
  
  /* Bölüm başlığı */
  .sidebar .nav-item-header {
    padding: .35rem .9rem;
    margin-top: .65rem;
    font-size: var(--fs-xxs);
    font-weight: 700;
    color: #a3b2c4;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  }
  
  .sidebar-header {
    padding: .9rem;
    text-align: center;
    background-color: var(--ddp-white);
    border-bottom: 2px solid var(--ddp-light-blue);
  }
  .sidebar-header .logo { max-width: 140px; }
  
  /* --------------------------------------------------------------------------
     Yardımcılar
     -------------------------------------------------------------------------- */
  .hidden-scrollbar { scrollbar-width: none; }
  .hidden-scrollbar::-webkit-scrollbar { display: none; }
  
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  
  /* 3D yardımcıları */
  .surface-3d { background: var(--surface-grad); box-shadow: var(--elev-2); border-radius: var(--radius-md); }
  .depth-1 { box-shadow: var(--elev-1)!important; }
  .depth-2 { box-shadow: var(--elev-2)!important; }
  .depth-3 { box-shadow: var(--elev-3)!important; }
  .tilt-on-hover { transform-style: preserve-3d; transition: transform .2s ease; }
  .tilt-on-hover:hover { transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-2px); }
  
  /* --------------------------------------------------------------------------
     Dark Mode
     -------------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root {
      --background-color: #0e1520;
      --primary-text-color: #f0f6fa;
      --secondary-text-color: #e8f0f8;
      --muted-text-color: #b8c5d4;
      --link-color: #5fc8f2;
      --ddp-neutral-50: #1a2330;
      --ddp-neutral-100: #223044;
      --ddp-neutral-200: #2b3b52;
      --ddp-neutral-300: #34475e;
      --ddp-neutral-600: #8a99aa;
      --border: 1px solid var(--ddp-neutral-300);

      /* Daha koyu gölgeler dark mode için */
      --key-shadow: 0 18px 28px -12px rgba(3, 14, 28, .65);
      --ambient-shadow: 0 6px 16px rgba(3,14,28,.45);
      --bevel-top: inset 0 1px 0 rgba(255,255,255,.12);
      --bevel-bottom: inset 0 -1px 0 rgba(0,0,0,.20);
      --elev-1: var(--bevel-top), var(--bevel-bottom), 0 1px 3px rgba(3,14,28,.15);
      --elev-2: var(--bevel-top), var(--bevel-bottom), 0 3px 8px rgba(3,14,28,.25), 0 12px 20px -8px rgba(3,14,28,.35);
      --elev-3: var(--bevel-top), var(--bevel-bottom), var(--ambient-shadow), var(--key-shadow);

      --surface-grad: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    }

    /* Dark mode için element spesifik ayarlar */
    .navbar {
      background: var(--surface-grad);
      border-bottom-color: var(--ddp-neutral-300);
    }
    .main-content {
      background: #0e1520;
    }
    .sidebar {
      background: linear-gradient(180deg, #0a1e33, #061728);
      border-right-color: var(--ddp-neutral-300);
    }

    /* Metin görünürlüğü iyileştirmeleri */
    h1, h2, h3 { color: var(--primary-text-color) !important; }
    body { color: var(--primary-text-color) !important; }
    p, span:not(.badge), div, label { color: var(--primary-text-color) !important; }
    .sidebar .nav-link { color: #d8e8f8 !important; }
    .sidebar .nav-link:hover, .sidebar .nav-link.active { color: #ffffff !important; }
    .sidebar .nav-item-header { color: #b8c5d4 !important; }

    /* Toast mesajları için dark mode */
    .toast { background-color: var(--ddp-neutral-100); color: var(--primary-text-color); }
    .toast-header { background-color: var(--ddp-neutral-200); border-bottom-color: var(--ddp-neutral-300); }

    /* Form elementleri için dark mode */
    .form-control, .form-select {
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
      border-color: var(--ddp-neutral-300) !important;
      color: var(--primary-text-color) !important;
    }
    .form-control:focus, .form-select:focus {
      background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.12)) !important;
      border-color: var(--link-color) !important;
      color: var(--primary-text-color) !important;
      box-shadow: 0 0 0 0.2rem rgba(95, 200, 242, 0.25) !important;
    }
    .form-control::placeholder { color: var(--muted-text-color) !important; }
    .form-label { color: var(--primary-text-color) !important; }

    /* Select elementleri için dark mode iyileştirmeleri */
    select {
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
      color: var(--primary-text-color) !important;
    }
    select option {
      background: var(--ddp-neutral-100) !important;
      color: var(--primary-text-color) !important;
    }
    select option:hover {
      background: var(--ddp-neutral-200) !important;
    }
    select option:checked {
      background: var(--ddp-light-blue) !important;
      color: var(--ddp-white) !important;
    }

    /* Tablo dark mode */
    .table {
      background: var(--surface-grad) !important;
      border-color: var(--ddp-neutral-300) !important;
      color: var(--primary-text-color) !important;
    }
    .table th, .table td {
      border-top-color: var(--ddp-neutral-300) !important;
      color: var(--primary-text-color) !important;
      background-color: transparent !important;
    }
    .table thead th {
      background: linear-gradient(180deg, #1a4a7a, var(--ddp-dark-blue)) !important;
      color: #ffffff !important;
    }
    .table-hover tbody tr:hover { background-color: rgba(79, 195, 247, .12) !important; }
    .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.04) !important; }

    /* Dark mode responsive kuralları */
    .table-responsive {
      border-color: var(--ddp-neutral-300);
    }

    /* Dark mode mobil kuralları */
    @media (max-width: 768px) {
      .table th, .table td {
        color: var(--primary-text-color);
      }
      .table-responsive {
        background: var(--surface-grad);
      }
    }

    /* Buton dark mode iyileştirmeleri */
    .btn-outline-primary { border-color: var(--link-color) !important; color: var(--link-color) !important; }
    .btn-outline-secondary { border-color: var(--ddp-light-blue) !important; color: var(--ddp-light-blue) !important; }
    .btn { color: var(--primary-text-color) !important; }
    .btn-light { background-color: var(--ddp-neutral-200) !important; color: var(--primary-text-color) !important; }

    /* Icon wrapper dark mode iyileştirmeleri */
    .icon-wrapper {
      background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.08)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9) !important,
        0 4px 10px rgba(13,61,110,.15) !important;
    }

    /* İstatistik kartlarındaki ikonlar için özel stil */
    .stat-card .icon-wrapper {
      background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.12)) !important;
      border: 1px solid rgba(0, 154, 222, 0.2) !important;
    }

    /* İkon elementleri için metin rengi */
    .icon-wrapper i, .icon-wrapper svg, .icon-wrapper .fa {
      color: var(--ddp-light-blue) !important;
      text-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
    }

    /* Bootstrap pagination dark mode iyileştirmeleri */
    .pagination .page-link {
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
      color: var(--primary-text-color) !important;
      border-color: var(--ddp-neutral-300) !important;
      text-decoration: none !important;
      padding: .25rem .5rem !important;
      font-size: .75rem !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      min-width: 28px !important;
      height: 28px !important;
    }

    .pagination .page-item {
      margin: 0 .05rem !important;
    }

    .pagination {
      padding: .25rem 0 !important;
    }

    .pagination .page-link:hover {
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
      color: var(--primary-text-color) !important;
      border-color: var(--ddp-neutral-300) !important;
    }

    .pagination .page-item.active .page-link {
      background: linear-gradient(180deg, var(--ddp-light-blue), var(--ddp-dark-blue)) !important;
      color: var(--ddp-white) !important;
      border-color: var(--ddp-light-blue) !important;
      box-shadow: 0 4px 12px rgba(0, 154, 222, 0.3) !important;
    }

    .pagination .page-item.disabled .page-link {
      background: var(--ddp-neutral-200) !important;
      color: var(--muted-text-color) !important;
      border-color: var(--ddp-neutral-300) !important;
    }

    /* Genel pagination kapsayıcı */
    .pagination {
      background: transparent !important;
    }

    /* CKEditor dark mode temel iyileştirmeleri */
    .ck-editor__editable_inline {
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
      border-color: var(--ddp-neutral-300) !important;
      color: var(--primary-text-color) !important;
    }

    .ck-editor__editable_inline:focus {
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
      border-color: var(--link-color) !important;
      box-shadow: 0 0 0 0.2rem rgba(95, 200, 242, 0.25) !important;
    }

    /* CKEditor toolbar butonları */
    .ck-toolbar .ck-button {
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
      color: var(--primary-text-color) !important;
      border-color: var(--ddp-neutral-300) !important;
    }

    .ck-toolbar .ck-button:hover {
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
      color: var(--primary-text-color) !important;
    }

    .ck-toolbar .ck-button.ck-on {
      background: linear-gradient(180deg, var(--ddp-light-blue), var(--ddp-dark-blue)) !important;
      color: var(--ddp-white) !important;
      border-color: var(--ddp-light-blue) !important;
    }

    /* CKEditor toolbar kapsayıcı */
    .ck-toolbar {
      background: linear-gradient(180deg, var(--ddp-neutral-200), var(--ddp-neutral-300)) !important;
      border-color: var(--ddp-neutral-300) !important;
    }

    /* CKEditor içerik alanı */
    .ck-content {
      color: var(--primary-text-color) !important;
    }

    /* Gümrük Raporu sayfası temel dark mode iyileştirmeleri */
    /* Beyaz arkaplanlı kartları override eder */
    .bg-white {
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
    }

    .text-dark {
      color: var(--primary-text-color) !important;
    }

    /* Ana tablo kapsayıcı */
    .table-responsive {
      background: transparent !important;
      border-color: var(--ddp-neutral-300) !important;
    }

    /* Detay butonları temel stilleri */
    .btn-sm {
      padding: .25rem .5rem !important;
      font-size: .75rem !important;
      border-radius: 4px !important;
    }

    /* Form check elementleri */
    .form-check-input {
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)) !important;
      border-color: var(--ddp-neutral-300) !important;
    }

    .form-check-input:checked {
      background: linear-gradient(180deg, var(--ddp-light-blue), var(--ddp-dark-blue)) !important;
      border-color: var(--ddp-light-blue) !important;
    }

    /* Modal temel stilleri */
    .modal-content {
      background: var(--ddp-neutral-100) !important;
      border-color: var(--ddp-neutral-300) !important;
    }

    .modal-header {
      background: var(--ddp-neutral-200) !important;
      border-bottom-color: var(--ddp-neutral-300) !important;
    }

    .modal-body {
      color: var(--primary-text-color) !important;
    }

    /* Loading metinleri */
    .text-center {
      color: var(--primary-text-color) !important;
    }

    .text-danger {
      color: var(--danger) !important;
    }
  }
  
/* Timeline for WorkOrder History */
.timeline-container {
    position: relative;
    padding-left: 20px;
}

.timeline-item {
    padding-bottom: 20px;
    position: relative;
    border-left: 2px solid #e9ecef;
    margin-left: 10px;
}

.timeline-item:last-child {
    border-left-color: transparent;
}

.timeline-item-header {
    position: relative;
    top: -5px;
    left: -11px; /* Adjust to center the dot on the line */
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
    width: 100%;
}

.timeline-item-header::before {
    content: '';
    background: #fff;
    border-radius: 50%;
    border: 3px solid #0d6efd;
    width: 12px;
    height: 12px;
    position: absolute;
    left: -6px; /* Position the dot over the line */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-item-header .badge {
    margin-left: 20px; /* Space for the dot */
}


.timeline-item-body {
    padding-left: 25px;
}

.timeline-item-duration {
    font-size: 0.85em;
}

.timeline-summary {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #e9ecef;
}

.timeline-date-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.timeline-date-separator::before,
.timeline-date-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #dee2e6;
}

.timeline-date-separator:not(:empty)::before {
    margin-right: .5em;
}

.timeline-date-separator:not(:empty)::after {
    margin-left: .5em;
}

.timeline-date-separator span {
    color: #6c757d;
    font-size: 0.85em;
    font-weight: 600;
}

/* Compact Vertical Timeline for WorkOrder History */
.timeline-container-compact {
    position: relative;
    padding-left: 10px;
}

.timeline-container-compact::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e9ecef;
    z-index: 0;
}

.timeline-item-compact {
    position: relative;
    padding: 2px 0 2px 15px; /* Left padding reduced after removing marker */
}

.timeline-marker-compact {
    display: none; /* Hide the marker */
    position: absolute;
    left: 3px; /* (marker width 14px / 2) - (line width 2px / 2) -> 7 - 1 = 6 */
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid #0d6efd;
    z-index: 1;
}

.timeline-content-compact {
    display: flex;
    align-items: center;
    width: 100%;
}

.timeline-duration-row {
    padding-top: 2px;
    text-align: center;
}

.timeline-summary {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #e9ecef;
}

.timeline-date-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.timeline-date-separator::before,
.timeline-date-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #dee2e6;
}

.timeline-date-separator:not(:empty)::before {
    margin-right: .5em;
}

.timeline-date-separator:not(:empty)::after {
    margin-left: .5em;
}

.timeline-date-separator span {
    color: #6c757d;
    font-size: 0.85em;
    font-weight: 600;
    background-color: #fff;
    padding: 0 0.5em;
    z-index: 1;
    position: relative;
}