:root{font-family:Inter,system-ui,sans-serif;color:#102027;background:#eef4f3}*{box-sizing:border-box}body{margin:0}.center{min-height:100vh;display:grid;place-items:center;padding:20px}.card,.panel,.hero{background:#fff;border-radius:18px;box-shadow:0 8px 30px #143a3520}.login{width:min(420px,100%);padding:32px}.login h1{letter-spacing:.22em;margin:0;color:#0b7669}.login p,.muted{color:#60706e}label{display:grid;gap:7px;font-size:13px;font-weight:650;margin:10px 0}input,select,textarea,button{font:inherit}input,select,textarea{border:1px solid #cbd8d6;border-radius:10px;padding:11px;background:#fff}textarea{min-height:88px;resize:vertical}button{border:0;border-radius:11px;padding:11px 15px;background:#0b7669;color:#fff;font-weight:700;cursor:pointer}.ghost{background:#e7efee;color:#24413d}.danger{background:#fee4e2;color:#b42318}.error{color:#b42318;margin-top:12px}header{position:sticky;top:0;z-index:5;background:#0c2d29;color:#fff;padding:12px 4vw;display:flex;align-items:center;gap:12px}header>div{display:grid}header small{opacity:.75}header select{margin-left:auto;max-width:330px}main{width:min(1240px,92vw);margin:24px auto 80px}.hero{padding:22px;display:flex;justify-content:space-between;align-items:center}.hero span,.hero p{color:#687a77}.hero h2{margin:6px 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.stat{background:#fff;border-radius:14px;padding:16px}.stat b{display:block;font-size:28px}.stat small{color:#6d7e7b}nav{display:flex;gap:8px;overflow:auto;margin:18px 0}nav button{white-space:nowrap;background:#dbe7e5;color:#24413d}nav button.active{background:#0b7669;color:#fff}.panel{padding:18px}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.work,.rowCard{border:1px solid #dce6e4;border-radius:14px;padding:15px;margin:10px 0;display:grid;grid-template-columns:1fr auto;gap:10px}.work h3{margin:5px 0}.meta{color:#687a77;font-size:13px;display:flex;flex-wrap:wrap;gap:10px}.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#e6f0ee;font-size:12px}.progress{height:8px;background:#e5eceb;border-radius:999px;overflow:hidden;margin-top:10px}.progress i{display:block;height:100%;background:#0b7669}.work-actions,.inlineActions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.work-actions select{max-width:170px}.gridform{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.wide{grid-column:1/-1}.actions{display:flex;justify-content:flex-end;gap:8px}.check{display:flex;grid-template-columns:auto 1fr;align-items:center}dialog{border:0;border-radius:18px;width:min(720px,94vw);padding:22px}dialog::backdrop{background:#0a292580}.upload{display:flex;gap:10px;flex-wrap:wrap}.file,.approval,.report,.notice{padding:12px;border-bottom:1px solid #e1e9e8}.file a{color:#0b7669}.permissions{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid #dce6e4;border-radius:12px}.permissions label{display:flex;grid-template-columns:auto 1fr;align-items:center}.unread{background:#f0fdf4;border-left:4px solid #0b7669}.pill{padding:3px 8px;border-radius:999px;background:#eef4f3;font-size:12px}code{word-break:break-all;background:#eef4f3;padding:4px 6px;border-radius:6px}@media(max-width:760px){header{flex-wrap:wrap}header select{order:4;width:100%;max-width:none}.stats{grid-template-columns:1fr 1fr}.hero{align-items:flex-start;gap:12px}.work,.rowCard{grid-template-columns:1fr}.gridform{grid-template-columns:1fr}.wide{grid-column:auto}main{width:94vw}.panel{padding:13px}.permissions{grid-template-columns:1fr}.sectionHead{align-items:flex-start}}
.heroActions,.filters{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.filters{padding:0 0 14px;border-bottom:1px solid #e1e9e8}.filters input{min-width:260px;flex:1}.report{display:flex;justify-content:space-between;align-items:center;gap:12px}.audit-json{white-space:pre-wrap;font-size:12px}.heroActions .ghost{background:#e7efee;color:#24413d}@media(max-width:760px){.heroActions{width:100%}.hero{flex-wrap:wrap}.heroActions button{flex:1}.filters{display:grid;grid-template-columns:1fr}.filters input{min-width:0}.report{align-items:flex-start}}
.timerBox{padding:16px;border:1px solid #dbe3ef;border-radius:14px;margin-bottom:16px;background:#f8fafc}.timerBox.active{border-color:#16a34a;background:#f0fdf4}.timerActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.qrWrap{padding:20px;text-align:center;min-width:300px}.qrWrap img{max-width:280px;width:100%;background:white}.punch-critical{border-left:5px solid #dc2626}.punch-high{border-left:5px solid #ea580c}.signature{font-family:cursive;font-size:18px;border-bottom:1px solid #94a3b8;display:inline-block;min-width:180px;padding:4px}.fieldSummary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}.fieldSummary div{padding:12px;border:1px solid #e2e8f0;border-radius:12px}
.financeGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:14px 0}.moneyCard{border:1px solid #dce6e4;border-radius:14px;padding:15px;background:#fff}.moneyCard b{font-size:24px;display:block}.moneyCard small{color:#687a77}.positive{color:#087f5b}.negative{color:#c92a2a}.budgetBar{height:8px;background:#e5eceb;border-radius:999px;overflow:hidden;margin-top:7px}.budgetBar i{display:block;height:100%;background:#0b7669}.financeColumns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compactForm{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.compactForm .wide{grid-column:1/-1}@media(max-width:760px){.financeColumns,.compactForm{grid-template-columns:1fr}.compactForm .wide{grid-column:auto}}


/* =========================================================
   VOLNA WORK CONTROL — MOBİL VE TABLET GÖRÜNÜMÜ
   ========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font-size: 16px;
}

button {
  min-height: 42px;
  touch-action: manipulation;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

img {
  max-width: 100%;
  height: auto;
}

/* Tablet */
@media (max-width: 1024px) {
  header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
  }

  header > div:first-child {
    flex: 1 1 100%;
  }

  header select {
    flex: 1 1 260px;
    min-width: 0;
  }

  main {
    width: 100%;
    padding: 14px;
  }

  .hero {
    align-items: flex-start;
    gap: 14px;
  }

  .heroActions {
    flex-wrap: wrap;
  }

  nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  nav button {
    flex: 0 0 auto;
  }

  .gridform {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .financeGrid,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rowCard,
  .work {
    gap: 12px;
  }
}

/* Telefon */
@media (max-width: 700px) {
  body {
    font-size: 14px;
  }

  header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px;
  }

  header > div:first-child {
    grid-column: 1 / -1;
  }

  header #projectSelect {
    grid-column: 1 / -1;
    width: 100%;
  }

  header #bell,
  header #logout {
    width: 100%;
  }

  main {
    padding: 10px;
  }

  .hero {
    display: block;
    padding: 14px;
  }

  .hero h2 {
    font-size: 21px;
    word-break: break-word;
  }

  .heroActions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 14px;
  }

  .heroActions button {
    width: 100%;
  }

  nav {
    position: sticky;
    top: 126px;
    z-index: 90;
    display: flex;
    gap: 7px;
    padding: 8px 4px;
    background: var(--surface, #fff);
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  }

  nav button {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 999px;
  }

  .panel,
  .card,
  .fieldOperationCard {
    padding: 12px;
    border-radius: 14px;
  }

  .sectionHead {
    display: block;
  }

  .sectionHead > button,
  .sectionHead .inlineActions {
    width: 100%;
    margin-top: 10px;
  }

  .inlineActions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .inlineActions button {
    width: 100%;
  }

  .filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .filters input,
  .filters select {
    width: 100%;
  }

  .gridform {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .gridform > *,
  .gridform .wide {
    grid-column: 1;
    min-width: 0;
  }

  .gridform input,
  .gridform select,
  .gridform textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .financeGrid,
  .stats {
    grid-template-columns: 1fr;
  }

  .stat,
  .moneyCard {
    min-width: 0;
  }

  .work,
  .rowCard,
  .approval,
  .report,
  .file,
  .notice {
    display: block;
    padding: 12px;
  }

  .work-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .work-actions select,
  .work-actions input,
  .work-actions button {
    width: 100% !important;
    box-sizing: border-box;
  }

  .meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .timerActions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .timerActions button {
    width: 100%;
  }

  .fieldSummary {
    grid-template-columns: 1fr 1fr;
  }

  dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 12px;
    border-radius: 0;
    box-sizing: border-box;
  }

  dialog::backdrop {
    background: rgba(15, 23, 42, 0.7);
  }

  dialog form {
    min-height: calc(100dvh - 24px);
    align-content: start;
  }

  dialog .actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 10px;
    background: inherit;
  }

  dialog .actions button {
    width: 100%;
  }

  table {
    min-width: 700px;
  }

  .tableWrap,
  .responsiveTable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #workScheduleSummary {
    grid-template-columns: 1fr 1fr;
  }

  #workScheduleList .rowCard {
    display: block;
  }

  #workScheduleList [data-edit-work-schedule] {
    width: 100%;
    margin-top: 12px;
  }
}

/* Küçük telefon */
@media (max-width: 430px) {
  header {
    grid-template-columns: 1fr;
  }

  header #bell,
  header #logout {
    grid-column: 1;
  }

  nav {
    top: 190px;
  }

  #workScheduleSummary,
  .fieldSummary {
    grid-template-columns: 1fr;
  }

  .badge {
    display: inline-block;
    margin-bottom: 5px;
  }
}


/* =========================================================
   VOLNA WORK CONTROL — MOBİL ALT MENÜ TASARIMI
   ========================================================= */

.mobile-bottom-nav,
.mobile-more-panel,
.mobile-more-overlay {
  display: none;
}

@media (max-width: 700px) {
  body.has-mobile-bottom-nav {
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  body.has-mobile-bottom-nav > nav:not(.mobile-bottom-nav) {
    display: none !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    min-height: 68px;
    padding:
      6px
      5px
      calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(14px);
  }

  .mobile-bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    padding: 5px 2px;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
  }

  .mobile-bottom-nav button.is-active {
    color: #0f766e;
    background: rgba(13, 148, 136, 0.1);
  }

  .mobile-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 23px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
  }

  .mobile-bottom-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-more-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .mobile-more-overlay.is-open {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-more-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    display: block;
    max-height: 82dvh;
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
    background: #fff;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 50px rgba(15, 23, 42, 0.25);
    transform: translateY(105%);
    transition: transform 220ms ease;
  }

  .mobile-more-panel.is-open {
    transform: translateY(0);
  }

  .mobile-more-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 18px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  }

  .mobile-more-header strong {
    display: block;
    font-size: 18px;
  }

  .mobile-more-header small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
  }

  .mobile-more-close {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    color: #334155;
    background: #f1f5f9;
    border: 0;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
  }

  .mobile-more-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: calc(82dvh - 86px);
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-more-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    color: #1e293b;
    text-align: left;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 13px;
  }

  .mobile-more-item:active {
    background: #ecfdf5;
    border-color: rgba(13, 148, 136, 0.35);
  }

  .mobile-more-item-icon {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #0f766e;
    background: rgba(13, 148, 136, 0.1);
    border-radius: 9px;
    font-size: 21px;
    font-weight: 700;
  }

  .mobile-more-item span:last-child {
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* Mobil alt menü kesin sabitleme */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.has-mobile-bottom-nav {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  #mobileBottomNav.mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;

    height: calc(70px + env(safe-area-inset-bottom)) !important;
    min-height: calc(70px + env(safe-area-inset-bottom)) !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 0 !important;

    margin: 0 !important;
    padding:
      5px
      4px
      calc(5px + env(safe-area-inset-bottom)) !important;

    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
    animation: none !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 99999 !important;
  }

  #mobileBottomNav.mobile-bottom-nav button {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;

    margin: 0 !important;
    padding: 4px 1px !important;

    transform: none !important;
    animation: none !important;
    box-sizing: border-box !important;
  }

  #mobileBottomNav .mobile-bottom-icon {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
  }

  #mobileBottomNav .mobile-bottom-label {
    width: 100% !important;
    line-height: 12px !important;
    text-align: center !important;
  }
}


/* Mobil yatay kaydırmayı tamamen kaldır */
@media (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
  }

  #app,
  main,
  header,
  nav,
  section,
  .panel,
  .hero,
  .stats,
  .filters,
  .gridform,
  .sectionHead,
  .card,
  .tableWrap,
  .mobile-more-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #app {
    overflow-x: hidden !important;
  }

  main {
    overflow-x: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  img,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
    height: auto;
  }

  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
  }

  th,
  td {
    max-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .mobile-bottom-nav {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* Mobilde masaüstü sekme menüsünü gizle */
@media (max-width: 700px) {
  #app > main > nav,
  #app main > nav,
  main > nav {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}


/* Volna Marine kurumsal mobil menü renkleri */
@media (max-width: 700px) {
  #mobileBottomNav.mobile-bottom-nav {
    border-top-color: rgba(18, 25, 101, 0.22) !important;
  }

  #mobileBottomNav button {
    color: #64748b !important;
    background: transparent !important;
  }

  #mobileBottomNav button.is-active {
    color: #121965 !important;
    background: rgba(18, 25, 101, 0.10) !important;
  }

  #mobileBottomNav button.is-active .mobile-bottom-icon {
    color: #121965 !important;
  }

  #mobileMorePanel .mobile-more-item {
    color: #121965 !important;
  }

  #mobileMorePanel .mobile-more-item:hover,
  #mobileMorePanel .mobile-more-item:active {
    background: rgba(18, 25, 101, 0.10) !important;
  }

  #mobileMorePanel .mobile-more-item-icon {
    color: #121965 !important;
  }
}


/* Volna Marine genel kurumsal renk düzeltmesi */
:root {
  --volna-blue: #121965;
  --volna-blue-soft: rgba(18, 25, 101, 0.10);
  --volna-blue-border: rgba(18, 25, 101, 0.28);
}

button:not(.danger):not(.ghost):not(.mobile-more-close) {
  background: var(--volna-blue);
}

.login h1,
.file a,
.positive {
  color: var(--volna-blue);
}

nav button.active {
  background: var(--volna-blue);
  color: #fff;
}

.progress i,
.budgetBar i {
  background: var(--volna-blue);
}

.unread {
  border-left-color: var(--volna-blue);
}

@media (max-width: 700px) {
  #mobileBottomNav button.is-active {
    color: var(--volna-blue) !important;
    background: var(--volna-blue-soft) !important;
  }

  #mobileMorePanel .mobile-more-item-icon {
    color: var(--volna-blue) !important;
    background: var(--volna-blue-soft) !important;
  }

  #mobileMorePanel .mobile-more-item:active {
    background: var(--volna-blue-soft) !important;
    border-color: var(--volna-blue-border) !important;
  }
}


/* =========================================================
   GİRİŞ VE UYGULAMA EKRANI GÖRÜNÜRLÜK DÜZELTMESİ
   hidden özelliği mobil CSS tarafından ezilmesin.
   ========================================================= */

[hidden] {
  display: none !important;
}

/* Giriş ekranında yalnızca giriş formu görünür */
body:not(.app-authenticated) #inviteScreen[hidden],
body:not(.app-authenticated) #app[hidden] {
  display: none !important;
}

/* Oturum açıldıktan sonra giriş ekranları kesinlikle gizlenir */
body.app-authenticated #login,
body.app-authenticated #inviteScreen {
  display: none !important;
}

/* Oturum açıldıktan sonra uygulama görünür */
body.app-authenticated #app:not([hidden]) {
  display: block !important;
}

@media (max-width: 700px) {
  #login.center:not([hidden]),
  #inviteScreen.center:not([hidden]) {
    min-height: 100dvh;
    width: 100%;
    overflow: hidden;
  }

  #login[hidden],
  #inviteScreen[hidden],
  #app[hidden] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}


/* Giriş ekranı acil düzeltmesi */
[hidden] {
  display: none !important;
}

#login:not([hidden]) {
  position: relative !important;
  z-index: 100001 !important;
  display: grid !important;
  pointer-events: auto !important;
}

#login form,
#login input,
#login button,
#login label {
  position: relative !important;
  z-index: 100002 !important;
  pointer-events: auto !important;
}

#login input {
  user-select: text !important;
  -webkit-user-select: text !important;
  touch-action: manipulation !important;
}

body:not(.has-authenticated-app) #mobileMoreOverlay,
body:not(.has-authenticated-app) #mobileMorePanel,
body:not(.has-authenticated-app) #mobileBottomNav {
  display: none !important;
  pointer-events: none !important;
}

.mobile-more-overlay:not(.is-open),
.mobile-more-panel:not(.is-open) {
  pointer-events: none !important;
  visibility: hidden !important;
}

.mobile-more-overlay.is-open,
.mobile-more-panel.is-open {
  pointer-events: auto !important;
  visibility: visible !important;
}


/* Mobil menüyü yalnızca uygulama açıldığında göster */
#app[hidden] ~ #mobileBottomNav,
#app[hidden] ~ #mobileMoreOverlay,
#app[hidden] ~ #mobileMorePanel {
  display: none !important;
  pointer-events: none !important;
}

#app:not([hidden]) ~ #mobileBottomNav {
  display: grid !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#app:not([hidden]) ~ #mobileMoreOverlay,
#app:not([hidden]) ~ #mobileMorePanel {
  display: block;
}

/* Önceki yanlış gizleme kuralını etkisizleştir */
body:not(.has-authenticated-app) #mobileBottomNav {
  display: grid !important;
}

body:not(.has-authenticated-app) #mobileMoreOverlay,
body:not(.has-authenticated-app) #mobileMorePanel {
  display: block;
}

body:not(.has-authenticated-app) #app[hidden] ~ #mobileBottomNav,
body:not(.has-authenticated-app) #app[hidden] ~ #mobileMoreOverlay,
body:not(.has-authenticated-app) #app[hidden] ~ #mobileMorePanel {
  display: none !important;
}


/* =========================================================
   MOBİL DİĞER MENÜSÜ AÇILMA DÜZELTMESİ
   ========================================================= */

@media (max-width: 700px) {
  #mobileMoreOverlay {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #mobileMoreOverlay.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #mobileMorePanel {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(110%) !important;
  }

  #mobileMorePanel.is-open {
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  #app[hidden] ~ #mobileMoreOverlay,
  #app[hidden] ~ #mobileMorePanel {
    display: none !important;
  }

  #app:not([hidden]) ~ #mobileMoreOverlay,
  #app:not([hidden]) ~ #mobileMorePanel {
    display: block !important;
  }
}


/* Mobil Diğer menüsü yazı görünürlüğü düzeltmesi */
@media (max-width: 700px) {
  #mobileMorePanel .mobile-more-item {
    color: #121965 !important;
    background: #f8fafc !important;
  }

  #mobileMorePanel .mobile-more-item span:last-child {
    color: #121965 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
  }

  #mobileMorePanel .mobile-more-item-icon {
    color: #ffffff !important;
    background: #121965 !important;
  }

  #mobileMorePanel .mobile-more-item:hover,
  #mobileMorePanel .mobile-more-item:active,
  #mobileMorePanel .mobile-more-item.is-active {
    color: #ffffff !important;
    background: #121965 !important;
    border-color: #121965 !important;
  }

  #mobileMorePanel .mobile-more-item:hover span,
  #mobileMorePanel .mobile-more-item:active span,
  #mobileMorePanel .mobile-more-item.is-active span {
    color: #ffffff !important;
  }

  #mobileMorePanel .mobile-more-item:hover .mobile-more-item-icon,
  #mobileMorePanel .mobile-more-item:active .mobile-more-item-icon,
  #mobileMorePanel .mobile-more-item.is-active .mobile-more-item-icon {
    color: #121965 !important;
    background: #ffffff !important;
  }

  #mobileMorePanel .mobile-more-close {
    color: #ffffff !important;
    background: #121965 !important;
  }
}


/* Mobil Diğer paneli kaydırma ve tıklama düzeltmesi */
@media (max-width: 700px) {
  body.mobile-menu-open {
    overflow: hidden !important;
  }

  #mobileMoreOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
  }

  #mobileMorePanel {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 100001 !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;
    height: min(82dvh, 720px) !important;
    max-height: 82dvh !important;

    overflow: hidden !important;
    pointer-events: none !important;
  }

  #mobileMorePanel.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  #mobileMorePanel .mobile-more-header {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
  }

  #mobileMorePanel .mobile-more-list {
    position: relative !important;
    z-index: 2 !important;

    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;

    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  #mobileMorePanel .mobile-more-item {
    position: relative !important;
    z-index: 3 !important;

    flex: 0 0 auto !important;
    width: 100% !important;

    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  #mobileMorePanel .mobile-more-item > * {
    pointer-events: none !important;
  }

  #mobileMorePanel .mobile-more-close {
    position: relative !important;
    z-index: 4 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}


/* =========================================================
   DİĞER MENÜSÜ TAM LİSTE VE KAYDIRMA DÜZELTMESİ
   ========================================================= */

@media (max-width: 700px) {
  #mobileMorePanel {
    height: 88dvh !important;
    max-height: 88dvh !important;
    overflow: hidden !important;
  }

  #mobileMorePanel .mobile-more-list {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 8px !important;

    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 12px 12px
      calc(30px + env(safe-area-inset-bottom)) !important;

    overflow-x: hidden !important;
    overflow-y: scroll !important;

    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  #mobileMorePanel .mobile-more-item {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 56px !important;

    pointer-events: auto !important;
  }

  #mobileMorePanel .mobile-more-item:last-child {
    margin-bottom: 24px !important;
  }

  .mobile-module-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 16px 0;
  }

  .mobile-module-card {
    padding: 15px;
    background: #f8fafc;
    border: 1px solid rgba(18, 25, 101, 0.16);
    border-radius: 14px;
  }

  .mobile-module-card small {
    display: block;
    margin-bottom: 7px;
    color: #64748b;
  }

  .mobile-module-card b {
    color: #121965;
    font-size: 22px;
  }

  .mobile-module-list {
    margin-top: 14px;
  }
}


/* =========================================================
   MOBİL DİĞER MENÜSÜ KESİN DİKEY KAYDIRMA DÜZELTMESİ
   ========================================================= */

@media (max-width: 700px) {
  #mobileMorePanel {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;

    width: 100vw !important;
    height: 88dvh !important;
    min-height: 0 !important;
    max-height: 88dvh !important;

    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  #mobileMorePanel .mobile-more-header {
    position: relative !important;
    flex: none !important;
    width: 100% !important;
    min-height: 64px !important;
    overflow: visible !important;
  }

  #mobileMorePanel .mobile-more-list {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 12px 12px
      calc(40px + env(safe-area-inset-bottom)) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;

    pointer-events: auto !important;
  }

  #mobileMorePanel .mobile-more-item {
    display: flex !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 0 8px !important;

    touch-action: manipulation !important;
    pointer-events: auto !important;
  }

  #mobileMorePanel .mobile-more-item:last-child {
    margin-bottom: 40px !important;
  }

  #mobileMorePanel.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  body.mobile-menu-open #mobileMorePanel,
  body.mobile-menu-open #mobileMorePanel .mobile-more-list {
    touch-action: pan-y !important;
  }
}


/* İşletme modülü kayıt kartları */
.business-record-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  margin: 10px 0;
  padding: 14px;

  background: #ffffff;
  border: 1px solid rgba(18, 25, 101, 0.16);
  border-radius: 14px;
}

.business-record-card strong {
  color: #121965;
}

.business-record-card p {
  margin: 6px 0;
}

.business-record-card small {
  color: #64748b;
}

.business-record-card .danger {
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .business-record-card {
    align-items: flex-start;
  }

  #purchaseDialog,
  #stockDialog,
  #invoiceDialog,
  #workScheduleDialog {
    width: 94vw;
    max-height: 88dvh;
    overflow-y: auto;
  }
}


/* Work Time Schedule iş ve onay bağlantısı */
.linked-schedule-card {
  align-items: flex-start;
}

.linked-schedule-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.schedule-approval-badge {
  display: inline-block;
  padding: 4px 8px;
  color: #ffffff;
  background: #121965;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
}

@media (max-width: 700px) {
  .linked-schedule-card {
    flex-direction: column;
  }

  .linked-schedule-delete {
    width: 100%;
  }
}

/* VOLNA MOBİL ALT MENÜ — TEK VE TEMİZ KURAL */
@media screen and (max-width: 700px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    transform: none !important;
    perspective: none !important;
    filter: none !important;
  }

  body {
    padding-bottom:
      calc(78px + env(safe-area-inset-bottom)) !important;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
  }

  body > #mobileBottomNav {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;

    margin: 0 !important;
    padding:
      6px
      max(6px, env(safe-area-inset-right))
      calc(6px + env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left)) !important;

    transform: none !important;
    translate: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    background: #ffffff !important;
    border-top: 1px solid rgba(18, 25, 101, 0.16) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.14) !important;

    z-index: 2147483000 !important;
  }

  body > #mobileBottomNav button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;

    min-width: 0 !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 4px 2px !important;

    color: #64748b !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;

    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  body > #mobileBottomNav button.active,
  body > #mobileBottomNav button.is-active {
    color: #121965 !important;
    background: rgba(18, 25, 101, 0.08) !important;
  }

  body > #mobileBottomNav .mobile-nav-icon,
  body > #mobileBottomNav .mobile-bottom-icon {
    font-size: 19px !important;
    line-height: 1 !important;
  }

  body > #mobileMoreOverlay {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    background: rgba(15, 23, 42, 0.48) !important;
    transform: none !important;

    z-index: 2147482999 !important;
  }

  body > #mobileMoreOverlay.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body > #mobileMorePanel {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100vw !important;
    max-width: 100vw !important;
    height: 88dvh !important;
    max-height: 88dvh !important;

    margin: 0 !important;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%) !important;

    background: #ffffff !important;
    border-radius: 22px 22px 0 0 !important;

    z-index: 2147483001 !important;
  }

  body > #mobileMorePanel.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  body > #mobileMorePanel .mobile-more-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}

@media screen and (min-width: 701px) {
  #mobileBottomNav,
  #mobileMoreOverlay,
  #mobileMorePanel {
    display: none !important;
  }
}


/* MOBİL ALT MENÜ ORTALAMA */
@media screen and (max-width: 700px) {
  body > #mobileBottomNav {
    left: 50% !important;
    right: auto !important;

    width: min(100%, 520px) !important;
    max-width: 520px !important;

    transform: translateX(-50%) !important;

    border-radius: 16px 16px 0 0 !important;
  }
}


/* DİĞER MENÜSÜ SİMGELERİ */
@media screen and (max-width: 700px) {
  #mobileMorePanel .mobile-more-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #mobileMorePanel .mobile-more-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  #mobileMorePanel .mobile-more-item-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;

    background: rgba(18, 25, 101, 0.08) !important;
    border-radius: 10px !important;

    font-size: 18px !important;
    line-height: 1 !important;
  }

  #mobileMorePanel .mobile-more-item-left > span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}


/* ESKİ WORK SCHEDULE BÖLÜMÜNÜ GİZLE */
#workScheduleLegacy,
#workScheduleDialogLegacy {
  display: none !important;
}

/* Stok ve hareket resimleri */
.inventoryCardContent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.inventoryCardDetails {
  flex: 1;
  min-width: 0;
}

.inventoryImageButton {
  display: block;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border, #d5dbe3);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}

.inventoryThumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inventoryImagePlaceholder {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 6px;
  border: 1px dashed var(--border, #d5dbe3);
  border-radius: 12px;
  color: var(--muted, #667085);
  font-size: 12px;
  text-align: center;
}

.inventoryImageDialog {
  width: min(94vw, 1000px);
  max-width: 1000px;
  padding: 14px;
  border: 0;
  border-radius: 16px;
  background: var(--panel, #fff);
}

.inventoryImageDialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.inventoryImageDialog img {
  display: block;
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
}

.inventoryImageClose {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
}

@media (max-width: 700px) {
  .inventoryCardContent {
    align-items: flex-start;
  }

  .inventoryImageButton,
  .inventoryImagePlaceholder {
    width: 64px;
    height: 64px;
  }
}


/* INVENTORY OUTPUT DIALOG 56 */
.inventoryActionButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.inventoryOutputDialog {
  width: min(92vw, 520px);
  max-width: 520px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--panel, #fff);
  color: inherit;
}

.inventoryOutputDialog::backdrop {
  background: rgba(15, 23, 42, 0.72);
}

.inventoryOutputForm {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.inventoryOutputForm label:not(.inventoryOutputImageButton) {
  display: grid;
  gap: 7px;
}

.inventoryOutputAvailable {
  padding: 12px;
  border-radius: 10px;
  background: var(--soft, #f2f4f7);
  font-weight: 700;
}

.inventoryOutputImageArea {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.inventoryOutputImageButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 42px;
  padding: 9px 15px;
  cursor: pointer;
}

.inventoryOutputImageName {
  overflow-wrap: anywhere;
}

.inventoryOutputPreview {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border: 1px solid var(--border, #d5dbe3);
  border-radius: 12px;
  background: #f8fafc;
}

.inventoryOutputFormActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.inventoryOutputClose {
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 25px;
  line-height: 1;
}

@media (max-width: 700px) {
  .inventoryActionButtons {
    width: 100%;
    justify-content: stretch;
  }

  .inventoryActionButtons button {
    flex: 1;
  }

  .inventoryOutputFormActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   MASAÜSTÜ FATURA EKRANINI MOBİLDE KULLAN
   Mobilde ayrı fatura özeti yerine billing bölümü gösterilir.
   ========================================================= */

@media (max-width: 900px) {
  #billing {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #billing .sectionHead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  #billing .financeGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #billing .financeColumns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
  }

  #billing .compactForm {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
  }

  #billing .compactForm label,
  #billing .compactForm .wide,
  #billing .compactForm button,
  #billing input,
  #billing select,
  #billing textarea {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #billing .rowCard {
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }

  /*
   * Eski ayrı mobil fatura özet ekranı artık kullanılmayacak.
   * Masaüstüyle aynı billing ekranı gösterilecek.
   */
  #invoices {
    display: none !important;
  }
}

/* BILLING CRUD MOBILE 56 */

.billing-record-card .inlineActions {
  justify-content: flex-end;
  align-self: center;
}

@media (max-width: 900px) {
  #billing h3 {
    margin-top: 28px;
    padding-top: 8px;
    border-top: 1px solid #dce6e4;
  }

  #billing .billing-record-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #billing .billing-record-card .inlineActions {
    width: 100%;
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
  }

  #billing .billing-record-card button {
    width: 100%;
    min-height: 42px;
  }

  #billing #invoiceList,
  #billing #claimList,
  #billing #paymentList,
  #billing #scheduleList {
    width: 100%;
    min-width: 0;
  }
}

/* BILLING ACCORDION UI 59 */

#billing.billing-accordion-enabled {
  display: block;
}

#billing .billing-accordion {
  width: 100%;
  margin: 12px 0;
  border: 1px solid #d8e5e2;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(16, 32, 39, 0.05);
}

#billing .billing-accordion > summary {
  min-height: 58px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: #f4f8f7;
  color: #173f3a;
  font-weight: 750;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

#billing .billing-accordion > summary::-webkit-details-marker {
  display: none;
}

#billing .billing-accordion > summary:hover {
  background: #eaf3f1;
}

#billing .billing-accordion[open] > summary {
  background: #e4f0ee;
  color: #0b6f63;
  border-bottom: 1px solid #d8e5e2;
}

#billing .billing-accordion-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#billing .billing-accordion-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  font-size: 17px;
}

#billing .billing-accordion-arrow {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

#billing .billing-accordion[open]
  .billing-accordion-arrow {
  transform: rotate(45deg);
}

#billing .billing-accordion-content {
  padding: 16px;
}

#billing .billing-accordion-content
  > form {
  margin: 0;
}

#billing .billing-accordion-content
  > div[id$="List"] {
  margin: 0;
}

#billing .billing-accordion-content
  .rowCard:first-child {
  margin-top: 0;
}

#billing .billing-accordion-content
  .rowCard:last-child {
  margin-bottom: 0;
}

/*
 * Eski iki sütunlu form kapsayıcıları kaldırıldığı için
 * akordeonlar tüm ekran genişliğini kullanır.
 */
#billing.billing-accordion-enabled
  > .financeColumns {
  display: contents;
}

@media (max-width: 760px) {
  #billing .billing-accordion {
    margin: 10px 0;
    border-radius: 12px;
  }

  #billing .billing-accordion > summary {
    min-height: 54px;
    padding: 12px 13px;
  }

  #billing .billing-accordion-content {
    padding: 12px;
  }

  #billing .billing-accordion-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 16px;
  }

  #billing .billing-accordion-title {
    font-size: 14px;
  }

  #billing .compactForm {
    grid-template-columns: 1fr;
  }

  #billing .compactForm .wide {
    grid-column: auto;
  }
}

/* HOME ONLY PROJECT PANEL 60 */

body.hide-home-project-panel main > .hero,
body.hide-home-project-panel main > .stats {
  display: none !important;
}

body.show-home-project-panel main > .hero {
  display: flex;
}

body.show-home-project-panel main > .stats {
  display: grid;
}

@media (max-width: 760px) {
  body.show-home-project-panel main > .hero {
    display: flex;
  }

  body.show-home-project-panel main > .stats {
    display: grid;
  }
}

/* REPORTS APPROVALS FILES HEADINGS 61 */

#reports > .module-page-heading,
#approvals > .module-page-heading,
#files > .module-page-heading {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dce6e4;
}

#reports > .module-page-heading h2,
#approvals > .module-page-heading h2,
#files > .module-page-heading h2 {
  margin: 0 0 5px;
  color: #173f3a;
  font-size: 24px;
  line-height: 1.2;
}

#reports > .module-page-heading p,
#approvals > .module-page-heading p,
#files > .module-page-heading p {
  margin: 0;
}

@media (max-width: 760px) {
  #reports > .module-page-heading,
  #approvals > .module-page-heading,
  #files > .module-page-heading {
    margin-bottom: 16px;
    padding-bottom: 12px;
    align-items: flex-start;
  }

  #reports > .module-page-heading h2,
  #approvals > .module-page-heading h2,
  #files > .module-page-heading h2 {
    font-size: 21px;
  }

  #reports > .module-page-heading p,
  #approvals > .module-page-heading p,
  #files > .module-page-heading p {
    font-size: 13px;
    line-height: 1.5;
  }

  #approvals > .module-page-heading {
    display: grid;
    grid-template-columns: 1fr;
  }

  #approvals > .module-page-heading button {
    width: 100%;
    margin-top: 8px;
  }
}

/* FIELD OPERATION ACCORDION UI 62 */

#field.field-accordion-enabled {
  display: block;
}

#field .field-accordion {
  width: 100%;
  margin: 12px 0;
  border: 1px solid #d8e5e2;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(16, 32, 39, 0.05);
}

#field .field-accordion > summary {
  min-height: 58px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: #f4f8f7;
  color: #173f3a;
  font-weight: 750;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

#field .field-accordion > summary::-webkit-details-marker {
  display: none;
}

#field .field-accordion > summary:hover {
  background: #eaf3f1;
}

#field .field-accordion[open] > summary {
  background: #e4f0ee;
  color: #0b6f63;
  border-bottom: 1px solid #d8e5e2;
}

#field .field-accordion-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#field .field-accordion-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  font-size: 17px;
}

#field .field-accordion-arrow {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

#field .field-accordion[open]
  .field-accordion-arrow {
  transform: rotate(45deg);
}

#field .field-accordion-content {
  padding: 16px;
}

#field .field-accordion-content
  > .fieldOperationCard {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

#field .field-accordion-content
  > .timerBox {
  margin: 0;
}

#field .field-accordion-content
  .sectionHead:first-child {
  margin-top: 0;
}

#field .field-accordion-content
  form:last-child,
#field .field-accordion-content
  #timeList:last-child,
#field .field-accordion-content
  #fieldPhotoList:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  #field .field-accordion {
    margin: 10px 0;
    border-radius: 12px;
  }

  #field .field-accordion > summary {
    min-height: 54px;
    padding: 12px 13px;
  }

  #field .field-accordion-content {
    padding: 12px;
  }

  #field .field-accordion-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 16px;
  }

  #field .field-accordion-title {
    font-size: 14px;
  }

  #field .field-accordion-content
    .gridform {
    grid-template-columns: 1fr;
  }

  #field .field-accordion-content
    .gridform .wide {
    grid-column: auto;
  }

  #field [data-field-accordion="work-records"]
    .sectionHead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #field [data-field-accordion="work-records"]
    .sectionHead > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  #field [data-field-accordion="work-records"]
    .sectionHead button,
  #field [data-field-accordion="work-records"]
    .sectionHead input {
    width: 100%;
  }
}

/* SERVICE REPORTS UI 63 */

#serviceReports {
  display: block;
}

#serviceReports[hidden] {
  display: none !important;
}

#serviceReports .service-report-page-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #dce6e4;
}

#serviceReports .service-report-page-head h2 {
  margin: 0 0 5px;
  color: #173f3a;
  font-size: 24px;
}

#serviceReports .service-report-page-head p {
  margin: 0;
}

.service-report-project-info,
.service-report-vessel-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid #d8e5e2;
  border-radius: 13px;
  background: #f4f8f7;
}

.service-report-project-info > div,
.service-report-vessel-summary > div {
  min-width: 0;
}

.service-report-project-info small,
.service-report-vessel-summary small {
  display: block;
  margin-bottom: 4px;
  color: #68817d;
  font-size: 12px;
}

.service-report-project-info strong,
.service-report-vessel-summary strong {
  display: block;
  overflow-wrap: anywhere;
  color: #173f3a;
}

.service-report-accordion {
  width: 100%;
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid #d8e5e2;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 3px 12px
    rgba(16, 32, 39, 0.05);
}

.service-report-accordion > summary {
  min-height: 58px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: #f4f8f7;
  color: #173f3a;
  font-weight: 750;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.service-report-accordion
  > summary::-webkit-details-marker {
  display: none;
}

.service-report-accordion
  > summary:hover {
  background: #eaf3f1;
}

.service-report-accordion[open]
  > summary {
  border-bottom:
    1px solid #d8e5e2;
  background: #e4f0ee;
  color: #0b6f63;
}

.service-report-accordion-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-report-accordion-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  font-size: 17px;
}

.service-report-accordion-arrow {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.service-report-accordion[open]
  .service-report-accordion-arrow {
  transform: rotate(45deg);
}

.service-report-accordion-content {
  padding: 16px;
}

.service-report-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-report-list-tools {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(190px, 280px);
  gap: 10px;
  margin-bottom: 14px;
}

.service-report-card {
  margin: 12px 0;
  padding: 15px;
  border: 1px solid #dce6e4;
  border-radius: 13px;
  background: #fff;
  box-shadow:
    0 2px 8px
    rgba(16, 32, 39, 0.04);
}

.service-report-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.service-report-card-top h3 {
  margin: 5px 0 0;
  color: #173f3a;
  font-size: 17px;
}

.service-report-number {
  color: #0b6f63;
  font-size: 13px;
  font-weight: 800;
}

.service-report-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef3f2;
  color: #355c56;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.service-report-status-in_progress,
.service-report-status-office_review {
  background: #fff4d7;
  color: #835f00;
}

.service-report-status-completed,
.service-report-status-email_sent,
.service-report-status-closed {
  background: #e3f4ed;
  color: #176d54;
}

.service-report-status-revision_required {
  background: #ffeadf;
  color: #9a431b;
}

.service-report-status-cancelled {
  background: #f4e6e6;
  color: #8d3434;
}

.service-report-card-meta {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 13px;
  color: #5f7470;
  font-size: 13px;
}

.service-report-card-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.service-report-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .service-report-project-info,
  .service-report-vessel-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .service-report-card-meta {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #serviceReports .service-report-page-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #serviceReports .service-report-page-head h2 {
    font-size: 21px;
  }

  #serviceReports .service-report-page-head button {
    width: 100%;
  }

  .service-report-project-info,
  .service-report-vessel-summary {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .service-report-accordion {
    margin: 10px 0;
    border-radius: 12px;
  }

  .service-report-accordion > summary {
    min-height: 54px;
    padding: 12px 13px;
  }

  .service-report-accordion-content {
    padding: 12px;
  }

  .service-report-accordion-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    font-size: 16px;
  }

  .service-report-accordion-title {
    font-size: 14px;
  }

  .service-report-form {
    grid-template-columns: 1fr;
  }

  .service-report-form .wide {
    grid-column: auto;
  }

  .service-report-list-tools {
    grid-template-columns: 1fr;
  }

  .service-report-card-top {
    display: grid;
    grid-template-columns: 1fr;
  }

  .service-report-status {
    justify-self: start;
  }

  .service-report-card-meta {
    grid-template-columns: 1fr;
  }

  .service-report-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .service-report-card-actions button {
    width: 100%;
  }

  .service-report-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .service-report-form-actions button {
    width: 100%;
  }
}

/* SERVICE REPORTS MENU VISIBILITY FIX 64 */

nav [data-tab="serviceReports"],
#mobileMorePanel [data-tab="serviceReports"],
#mobileBottomNav [data-tab="serviceReports"] {
  visibility: visible !important;
  opacity: 1 !important;
}

#serviceReports[hidden] {
  display: none !important;
}

#serviceReports:not([hidden]) {
  display: block !important;
}

/* SERVICE REPORT PDF AND EXCEL UI 66 */

#serviceReports
  .service-report-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#serviceReports
  .service-report-card-actions
  [data-service-report-pdf] {
  background: #f4f8f7;
  color: #173f3a;
}

@media (max-width: 760px) {
  #serviceReports
    .service-report-heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  #serviceReports
    .service-report-heading-actions
    button {
    width: 100%;
  }

  #serviceReports
    .service-report-card-actions {
    grid-template-columns: 1fr;
  }
}

/* VOLNA REAL DESKTOP SHELL 96 */

:root {
  --volna96-blue: #123b76;
  --volna96-blue-dark: #092d5d;
  --volna96-blue-light: #eaf1fb;
  --volna96-bg: #f5f7fb;
  --volna96-card: #ffffff;
  --volna96-border: #dfe6ef;
  --volna96-text: #18263f;
  --volna96-muted: #758198;
  --volna96-sidebar: 252px;
  --volna96-topbar: 78px;
}

.volna-app-shell-96 {
  min-height: 100vh;
}

@media (min-width: 1024px) {
  body {
    margin: 0;
    background: var(--volna96-bg);
    color: var(--volna96-text);
    overflow-x: hidden;
  }

  .volna-app-shell-96 {
    display: grid !important;
    grid-template-columns:
      var(--volna96-sidebar)
      minmax(0, 1fr);
    min-height: 100vh;
    background: var(--volna96-bg);
  }

  .volna-desktop-sidebar-96 {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1000;
    width: var(--volna96-sidebar);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right:
      1px solid var(--volna96-border);
    box-shadow:
      8px 0 26px rgba(30, 52, 88, 0.04);
  }

  .volna-desktop-brand-96 {
    min-height: 104px;
    padding: 22px 21px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom:
      1px solid #edf1f6;
  }

  .volna-desktop-logo-96 {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }

  .volna-brand-copy-96 {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .volna-brand-copy-96 strong {
    color: var(--volna96-blue);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.2px;
    white-space: nowrap;
  }

  .volna-brand-copy-96 span {
    margin-top: 4px;
    color: var(--volna96-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.6px;
  }

  .volna-navigation-title-96 {
    padding: 20px 22px 8px;
    color: #9aa5b7;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
  }

  .volna-desktop-navigation-96 {
    flex: 1;
    min-height: 0;
    padding: 4px 13px 18px !important;
    display: flex !important;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    border: 0 !important;
    background: transparent !important;
  }

  .volna-desktop-navigation-96 button {
    width: 100%;
    min-height: 42px;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #506078 !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
  }

  .volna-desktop-navigation-96 button:hover {
    background:
      var(--volna96-blue-light) !important;
    color:
      var(--volna96-blue) !important;
  }

  .volna-desktop-navigation-96 button.active {
    position: relative;
    background:
      linear-gradient(
        135deg,
        var(--volna96-blue),
        var(--volna96-blue-dark)
      ) !important;
    color: #ffffff !important;
    box-shadow:
      0 8px 18px rgba(18, 59, 118, 0.18) !important;
  }

  .volna-desktop-navigation-96 button.active::before {
    content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 22px;
    border-radius: 0 4px 4px 0;
    background: #ffffff;
    opacity: 0.9;
  }

  .volna-sidebar-footer-96 {
    padding: 13px;
    border-top:
      1px solid #edf1f6;
    background: #fbfcfe;
  }

  .volna-sidebar-user-96 {
    padding: 9px 7px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .volna-user-avatar-96,
  .volna-topbar-avatar-96 {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
      var(--volna96-blue);
    color: #ffffff;
    font-weight: 750;
  }

  .volna-user-avatar-96 {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }

  .volna-sidebar-user-copy-96,
  .volna-topbar-user-copy-96 {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .volna-sidebar-user-copy-96 strong,
  .volna-topbar-user-copy-96 strong {
    overflow: hidden;
    color: var(--volna96-text);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .volna-sidebar-user-copy-96 strong {
    font-size: 11px;
  }

  .volna-sidebar-user-copy-96 span,
  .volna-topbar-user-copy-96 span {
    margin-top: 2px;
    color: var(--volna96-muted);
    font-size: 9px;
  }

  .volna-sidebar-logout-96 {
    width: 100%;
    min-height: 37px;
    border:
      1px solid #d9e2ef !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color:
      var(--volna96-blue) !important;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 650;
  }

  .volna-desktop-workspace-96 {
    grid-column: 2;
    min-width: 0;
    min-height: 100vh;
  }

  .volna-desktop-topbar-96 {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--volna96-sidebar);
    z-index: 900;
    height: var(--volna96-topbar);
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background:
      rgba(255, 255, 255, 0.97);
    border-bottom:
      1px solid var(--volna96-border);
    box-shadow:
      0 4px 18px rgba(30, 52, 88, 0.035);
    backdrop-filter: blur(14px);
  }

  .volna-topbar-left-96,
  .volna-topbar-right-96 {
    display: flex;
    align-items: center;
  }

  .volna-topbar-left-96 {
    flex: 1;
    gap: 16px;
  }

  .volna-topbar-right-96 {
    gap: 13px;
  }

  .volna-mobile-brand-96 {
    display: none;
  }

  .volna-project-selector-box-96 {
    width: min(390px, 42vw);
    min-height: 52px;
    padding: 7px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border:
      1px solid var(--volna96-border);
    border-radius: 10px;
    background: #ffffff;
  }

  .volna-project-selector-box-96 > span {
    margin-bottom: 2px;
    color: var(--volna96-muted);
    font-size: 9px;
    font-weight: 650;
  }

  .volna-project-selector-box-96 select {
    width: 100%;
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 26px 0 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    color: var(--volna96-text) !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 700;
  }

  .volna-topbar-bell-96 {
    min-width: 105px;
    min-height: 39px;
    padding: 0 14px !important;
    border:
      1px solid var(--volna96-border) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color:
      var(--volna96-blue) !important;
    box-shadow: none !important;
    font-size: 11px;
    font-weight: 650;
  }

  .volna-topbar-user-96 {
    min-width: 150px;
    padding-left: 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-left:
      1px solid var(--volna96-border);
  }

  .volna-topbar-avatar-96 {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .volna-topbar-user-copy-96 strong {
    max-width: 145px;
    font-size: 11px;
  }

  .volna-desktop-main-96 {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding:
      calc(var(--volna96-topbar) + 24px)
      28px
      36px !important;
    background: var(--volna96-bg);
  }

  .volna-project-hero-96 {
    max-width: 1500px;
    min-height: 126px;
    margin: 0 auto 16px !important;
    padding: 23px 25px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border:
      1px solid var(--volna96-border) !important;
    border-radius: 13px !important;
    background:
      linear-gradient(
        120deg,
        #ffffff 0%,
        #fbfdff 100%
      ) !important;
    box-shadow:
      0 6px 24px rgba(30, 52, 88, 0.05) !important;
  }

  .volna-project-hero-96 span {
    color:
      var(--volna96-blue);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.9px;
    text-transform: uppercase;
  }

  .volna-project-hero-96 h2 {
    margin: 7px 0 5px !important;
    color: var(--volna96-text);
    font-size: 27px !important;
    font-weight: 750;
    letter-spacing: -0.5px;
  }

  .volna-project-hero-96 p {
    margin: 0;
    color: var(--volna96-muted);
    font-size: 12px;
  }

  .volna-project-hero-96 .heroActions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .volna-dashboard-stats-96 {
    max-width: 1500px;
    margin: 0 auto 16px !important;
    display: grid !important;
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .volna-dashboard-stats-96 > * {
    min-width: 0;
    min-height: 95px;
    padding: 16px !important;
    border:
      1px solid var(--volna96-border) !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow:
      0 4px 16px rgba(30, 52, 88, 0.04) !important;
  }

  .volna-content-panel-96 {
    max-width: 1500px;
    margin-right: auto !important;
    margin-left: auto !important;
    border:
      1px solid var(--volna96-border) !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow:
      0 6px 24px rgba(30, 52, 88, 0.05) !important;
  }

  .volna-desktop-main-96 input,
  .volna-desktop-main-96 select,
  .volna-desktop-main-96 textarea {
    border:
      1px solid #dce4ee !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .volna-desktop-main-96 button:not(.ghost):not(.danger) {
    border-color:
      var(--volna96-blue) !important;
    background:
      var(--volna96-blue) !important;
    color: #ffffff !important;
  }

  .volna-desktop-main-96 .ghost {
    border-color:
      #d7e0ec !important;
    background: #ffffff !important;
    color:
      var(--volna96-blue) !important;
  }
}

@media (
  min-width: 1024px
) and (
  max-width: 1280px
) {
  :root {
    --volna96-sidebar: 220px;
  }

  .volna-dashboard-stats-96 {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

  .volna-topbar-user-copy-96 {
    display: none;
  }

  .volna-topbar-user-96 {
    min-width: auto;
  }
}

@media (max-width: 1023px) {
  .volna-app-shell-96 {
    display: block !important;
  }

  .volna-desktop-sidebar-96 {
    position: static;
    width: auto;
    display: block;
    background: transparent;
  }

  .volna-desktop-brand-96,
  .volna-navigation-title-96,
  .volna-sidebar-footer-96 {
    display: none;
  }

  .volna-desktop-navigation-96 {
    display: flex !important;
    overflow-x: auto;
  }

  .volna-desktop-workspace-96 {
    display: flex;
    flex-direction: column;
  }

  .volna-desktop-topbar-96 {
    position: static;
    order: -1;
  }

  .volna-mobile-brand-96 {
    display: flex;
    flex-direction: column;
  }

  .volna-topbar-user-96 {
    display: none;
  }

  .volna-desktop-main-96 {
    padding-top: 16px !important;
  }
}

/* VOLNA DESKTOP DASHBOARD 97 */

@media (min-width: 1024px) {
  .volna-home-button-97 {
    order: -100;
  }

  .volna-menu-icon-97 {
    width: 20px;
    font-size: 18px;
    text-align: center;
  }

  .volna-dashboard-page-97 {
    max-width: 1500px;
    margin: 0 auto;
  }

  .volna-project-overview-97 {
    min-height: 128px;
    margin-bottom: 16px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns:
      126px
      minmax(230px, 1fr)
      minmax(430px, 1.7fr)
      auto;
    align-items: center;
    gap: 22px;
    border:
      1px solid var(--volna96-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
      0 5px 20px rgba(30, 52, 88, 0.05);
  }

  .volna-project-image-97 {
    width: 126px;
  }

  .volna-project-image-placeholder-97 {
    width: 126px;
    height: 96px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    background:
      linear-gradient(
        145deg,
        #e6eef9,
        #f7faff
      );
  }

  .volna-project-image-placeholder-97 img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    opacity: 0.85;
  }

  .volna-active-label-97 {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 6px;
    background: #def6ee;
    color: #087c67;
    font-size: 9px;
    font-weight: 800;
  }

  .volna-project-main-97 h1 {
    margin: 9px 0 9px;
    color: #172746;
    font-size: 25px;
    font-weight: 760;
    line-height: 1.1;
  }

  .volna-project-meta-97 {
    color: #6f7e95;
    font-size: 11px;
    line-height: 1.6;
  }

  .volna-project-info-grid-97 {
    display: grid;
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }

  .volna-project-info-item-97 {
    min-height: 69px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left:
      1px solid #e4e9f0;
  }

  .volna-project-info-item-97 small {
    margin-bottom: 7px;
    color: #728098;
    font-size: 9px;
    font-weight: 650;
  }

  .volna-project-info-item-97 strong {
    color: #172746;
    font-size: 11px;
    font-weight: 720;
    line-height: 1.45;
  }

  .volna-project-detail-97 {
    align-self: start;
    min-width: 108px;
  }

  .volna-kpi-grid-97 {
    margin-bottom: 16px;
    display: grid;
    grid-template-columns:
      repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .volna-kpi-card-97 {
    min-height: 96px;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    gap: 13px;
    border:
      1px solid var(--volna96-border);
    border-radius: 13px;
    background: #ffffff;
    box-shadow:
      0 4px 16px rgba(30, 52, 88, 0.04);
  }

  .volna-kpi-icon-97 {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 21px;
    font-weight: 800;
  }

  .volna-kpi-card-97.blue
  .volna-kpi-icon-97 {
    background: #e7f0ff;
    color: #2369d8;
  }

  .volna-kpi-card-97.green
  .volna-kpi-icon-97 {
    background: #e8f7e8;
    color: #32a84a;
  }

  .volna-kpi-card-97.red
  .volna-kpi-icon-97 {
    background: #ffe9e9;
    color: #e53b3b;
  }

  .volna-kpi-card-97.orange
  .volna-kpi-icon-97 {
    background: #fff1df;
    color: #ef8a1c;
  }

  .volna-kpi-card-97.purple
  .volna-kpi-icon-97 {
    background: #f1e8fc;
    color: #8a45ca;
  }

  .volna-kpi-card-97 > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .volna-kpi-card-97 small {
    color: #6d7a91;
    font-size: 9px;
    font-weight: 650;
  }

  .volna-kpi-card-97 strong {
    margin: 4px 0 3px;
    overflow: hidden;
    color: #172746;
    font-size: 21px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .volna-kpi-card-97 span {
    color: #7c899c;
    font-size: 9px;
  }

  .volna-dashboard-columns-97 {
    margin-bottom: 16px;
    display: grid;
    grid-template-columns:
      minmax(0, 1.4fr)
      minmax(340px, 1fr);
    gap: 16px;
  }

  .volna-dashboard-card-97 {
    overflow: hidden;
    border:
      1px solid var(--volna96-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
      0 5px 20px rgba(30, 52, 88, 0.05);
  }

  .volna-dashboard-card-head-97 {
    min-height: 50px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom:
      1px solid #e9edf3;
  }

  .volna-dashboard-card-head-97 h2 {
    margin: 0;
    color: #172746;
    font-size: 14px;
    font-weight: 740;
  }

  .volna-dashboard-card-head-97
  button {
    min-height: 32px !important;
    font-size: 10px !important;
  }

  .volna-finance-summary-97 {
    min-height: 240px;
    padding: 22px;
    display: grid;
    grid-template-columns:
      minmax(280px, 1fr)
      minmax(270px, 1fr);
    align-items: center;
    gap: 22px;
  }

  .volna-finance-values-97 {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .volna-finance-values-97 > div {
    min-height: 86px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right:
      1px solid #e7ebf1;
    border-bottom:
      1px solid #e7ebf1;
  }

  .volna-finance-values-97
  > div:nth-child(2n) {
    border-right: 0;
  }

  .volna-finance-values-97
  > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .volna-finance-values-97 small {
    margin-bottom: 9px;
    color: #718098;
    font-size: 9px;
    font-weight: 650;
    text-transform: uppercase;
  }

  .volna-finance-values-97 strong {
    color: #173b76;
    font-size: 17px;
    font-weight: 760;
  }

  .volna-finance-chart-97 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }

  .volna-donut-97 {
    flex: 0 0 auto;
    width: 142px;
    height: 142px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
      conic-gradient(
        #149a8b 0 var(--collected),
        #ef8b23 var(--collected)
        calc(
          var(--collected) +
          var(--outstanding)
        ),
        #e5eaf1
        calc(
          var(--collected) +
          var(--outstanding)
        )
        100%
      );
  }

  .volna-donut-97::before {
    content: "";
    position: absolute;
    width: 102px;
    height: 102px;
    border-radius: 50%;
    background: #ffffff;
  }

  .volna-donut-97 {
    position: relative;
  }

  .volna-donut-97 > div {
    position: relative;
    z-index: 1;
    width: 90px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .volna-donut-97 strong {
    overflow: hidden;
    color: #172746;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .volna-donut-97 span {
    margin-top: 4px;
    color: #738198;
    font-size: 9px;
  }

  .volna-chart-legend-97 {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .volna-chart-legend-97 span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #5f6e84;
    font-size: 9px;
  }

  .volna-chart-legend-97 i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .volna-chart-legend-97 i.collected {
    background: #149a8b;
  }

  .volna-chart-legend-97 i.outstanding {
    background: #ef8b23;
  }

  .volna-chart-legend-97 i.overdue {
    background: #e53b3b;
  }

  .volna-service-summary-97 {
    min-height: 240px;
  }

  .volna-service-row-97 {
    min-height: 48px;
    padding: 8px 16px;
    display: grid;
    grid-template-columns:
      32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom:
      1px solid #edf0f4;
  }

  .volna-service-row-97:last-child {
    border-bottom: 0;
  }

  .volna-service-icon-97 {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #eaf1fb;
    color: #2467cd;
    font-size: 14px;
  }

  .volna-service-copy-97 {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .volna-service-copy-97 strong {
    overflow: hidden;
    color: #253552;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .volna-service-copy-97 span {
    margin-top: 3px;
    color: #8390a3;
    font-size: 8px;
  }

  .volna-service-status-97 {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 700;
  }

  .volna-service-status-97.completed {
    background: #e7f7e8;
    color: #26973d;
  }

  .volna-service-status-97.pending {
    background: #fff1df;
    color: #d97913;
  }

  .volna-service-status-97.draft {
    background: #eef1f5;
    color: #68758a;
  }

  .volna-work-table-card-97 {
    margin-bottom: 20px;
  }

  .volna-count-badge-97 {
    display: inline-flex;
    min-width: 25px;
    height: 20px;
    margin-left: 6px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #e8eef7;
    color: #31547d;
    font-size: 9px;
  }

  .volna-table-actions-97 {
    display: flex;
    gap: 7px;
  }

  .volna-table-scroll-97 {
    overflow-x: auto;
  }

  .volna-work-table-97 {
    width: 100%;
    border-collapse: collapse;
  }

  .volna-work-table-97 th {
    height: 39px;
    padding: 8px 12px;
    border-bottom:
      1px solid #e7ebf1;
    background: #fafbfd;
    color: #708099;
    font-size: 8px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
  }

  .volna-work-table-97 td {
    height: 46px;
    padding: 8px 12px;
    border-bottom:
      1px solid #edf0f4;
    color: #42536d;
    font-size: 9px;
  }

  .volna-work-table-97 tbody
  tr:last-child td {
    border-bottom: 0;
  }

  .volna-work-table-97 td strong {
    color: #244675;
    font-weight: 700;
  }

  .volna-work-status-97,
  .volna-priority-97 {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 700;
  }

  .volna-work-status-97.in_progress {
    background: #e7f0ff;
    color: #2869d7;
  }

  .volna-work-status-97.planned {
    background: #e5f7f6;
    color: #168985;
  }

  .volna-work-status-97.completed,
  .volna-work-status-97.closed {
    background: #e7f7e8;
    color: #26973d;
  }

  .volna-priority-97.critical,
  .volna-priority-97.high {
    background: #ffebeb;
    color: #db3434;
  }

  .volna-priority-97.normal {
    background: #fff1df;
    color: #db7b16;
  }

  .volna-priority-97.low {
    background: #e7f0ff;
    color: #2869d7;
  }

  .volna-progress-cell-97 {
    min-width: 105px;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .volna-progress-cell-97 > div {
    flex: 1;
    height: 5px;
    overflow: hidden;
    border-radius: 4px;
    background: #e7ebf1;
  }

  .volna-progress-cell-97 i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #148b82;
  }

  .volna-progress-cell-97 span {
    width: 27px;
    color: #607088;
    font-size: 8px;
  }

  .volna-row-action-97 {
    min-width: 31px !important;
    width: 31px;
    padding: 0 !important;
    border: 0 !important;
  }

  .volna-table-footer-97 {
    min-height: 48px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #78869a;
    font-size: 9px;
    border-top:
      1px solid #edf0f4;
  }

  .volna-empty-97 {
    padding: 35px 20px;
    color: #8793a4;
    font-size: 11px;
    text-align: center;
  }
}

@media (
  min-width: 1024px
) and (
  max-width: 1280px
) {
  .volna-project-overview-97 {
    grid-template-columns:
      104px
      minmax(200px, 1fr)
      minmax(330px, 1.4fr);
  }

  .volna-project-detail-97 {
    display: none;
  }

  .volna-project-image-97,
  .volna-project-image-placeholder-97 {
    width: 104px;
  }

  .volna-project-info-grid-97 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .volna-kpi-grid-97 {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .volna-dashboard-columns-97 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1023px) {
  .volna-dashboard-page-97 {
    display: none !important;
  }

  .volna-home-button-97 {
    display: none !important;
  }
}

/* VOLNA DESKTOP SHELL FIX 98 */

@media (min-width: 1024px) {
  :root {
    --volna98-sidebar: 220px;
    --volna98-topbar: 78px;
    --volna98-blue: #102f73;
    --volna98-text: #172746;
    --volna98-muted: #758299;
    --volna98-border: #e1e7ef;
    --volna98-page: #f6f8fb;
  }

  body.volna-desktop-active-98 {
    margin: 0 !important;
    overflow-x: hidden;
    background:
      var(--volna98-page) !important;
  }

  .volna-app-shell-98 {
    min-height: 100vh;
    display: block !important;
    background:
      var(--volna98-page);
  }

  .volna-desktop-sidebar-98 {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1000;
    width:
      var(--volna98-sidebar) !important;
    min-width:
      var(--volna98-sidebar) !important;
    max-width:
      var(--volna98-sidebar) !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff !important;
    border-right:
      1px solid var(--volna98-border);
    box-shadow:
      8px 0 24px
      rgba(20, 46, 91, 0.035);
  }

  .volna-desktop-brand-98 {
    min-height: 104px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom:
      1px solid #edf1f6;
  }

  .volna-desktop-brand-98 img {
    width: 48px;
    height: 58px;
    object-fit: contain;
  }

  .volna-desktop-brand-98 > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .volna-desktop-brand-98 strong {
    color:
      var(--volna98-blue);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  .volna-desktop-brand-98 span {
    margin-top: 4px;
    color:
      var(--volna98-muted);
    font-size: 8px;
    line-height: 1.4;
  }

  .volna-menu-title-98 {
    padding: 18px 18px 8px;
    color: #a0aabc;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
  }

  .volna-desktop-navigation-98 {
    position: static !important;
    inset: auto !important;
    flex: 1;
    min-height: 0;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 12px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      transparent !important;
    box-shadow: none !important;
  }

  .volna-desktop-navigation-98
  button {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px;
    margin: 0 !important;
    padding: 0 13px !important;
    display: flex !important;
    align-items: center;
    justify-content:
      flex-start !important;
    gap: 9px;
    border: 0 !important;
    border-radius: 8px !important;
    background:
      transparent !important;
    color: #52627b !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
  }

  .volna-desktop-navigation-98
  button:hover {
    background:
      #edf3fc !important;
    color:
      var(--volna98-blue) !important;
  }

  .volna-desktop-navigation-98
  button.active {
    background:
      linear-gradient(
        135deg,
        #143c86,
        #0c2a64
      ) !important;
    color: #ffffff !important;
    box-shadow:
      0 7px 16px
      rgba(16, 47, 115, 0.18) !important;
  }

  .volna-menu-icon-98 {
    width: 18px;
    font-size: 16px;
    text-align: center;
  }

  .volna-sidebar-footer-98 {
    min-height: 68px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-top:
      1px solid #edf1f6;
    background: #fbfcfe;
  }

  .volna-sidebar-avatar-98 {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
      var(--volna98-blue);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
  }

  .volna-sidebar-user-98 {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .volna-sidebar-user-98 strong {
    overflow: hidden;
    color:
      var(--volna98-text);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .volna-sidebar-user-98 span {
    margin-top: 3px;
    color:
      var(--volna98-muted);
    font-size: 8px;
  }

  .volna-desktop-workspace-98 {
    min-width: 0;
    min-height: 100vh;
    margin-left:
      var(--volna98-sidebar) !important;
    background:
      var(--volna98-page);
  }

  .volna-desktop-topbar-98 {
    position: fixed !important;
    top: 0;
    right: 0;
    left:
      var(--volna98-sidebar) !important;
    z-index: 900;
    height:
      var(--volna98-topbar);
    padding: 0 24px !important;
    display: grid !important;
    grid-template-columns:
      minmax(240px, 330px)
      minmax(280px, 460px)
      auto;
    align-items: center;
    gap: 18px;
    background:
      rgba(255, 255, 255, 0.98) !important;
    border-bottom:
      1px solid var(--volna98-border);
    box-shadow:
      0 4px 18px
      rgba(20, 46, 91, 0.035);
  }

  .volna-topbar-project-98 {
    min-height: 52px;
    padding: 7px 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border:
      1px solid var(--volna98-border);
    border-radius: 10px;
    background: #ffffff;
  }

  .volna-topbar-project-98 > span {
    margin-bottom: 2px;
    color:
      var(--volna98-muted);
    font-size: 8px;
    font-weight: 650;
  }

  .volna-project-select-host-98
  select {
    width: 100%;
    height: 25px !important;
    min-height: 25px !important;
    padding: 0 24px 0 0 !important;
    border: 0 !important;
    background-color:
      transparent !important;
    color:
      var(--volna98-text) !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 700;
  }

  .volna-topbar-search-98 {
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    border:
      1px solid var(--volna98-border);
    border-radius: 10px;
    background: #ffffff;
  }

  .volna-topbar-search-98 span {
    color: #6e7e97;
    font-size: 18px;
  }

  .volna-topbar-search-98 input {
    width: 100%;
    height: 36px;
    padding: 0 !important;
    border: 0 !important;
    background:
      transparent !important;
    box-shadow: none !important;
    color:
      var(--volna98-text);
    font-size: 11px;
  }

  .volna-topbar-actions-98 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
  }

  .volna-bell-host-98 button,
  .volna-logout-host-98 button {
    min-height: 38px !important;
    padding: 0 12px !important;
    border:
      1px solid var(--volna98-border) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color:
      var(--volna98-blue) !important;
    box-shadow: none !important;
    font-size: 10px !important;
  }

  .volna-topbar-user-98 {
    min-width: 145px;
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .volna-topbar-avatar-98 {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
      var(--volna98-blue);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
  }

  .volna-topbar-user-98 > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .volna-topbar-user-98 strong {
    overflow: hidden;
    color:
      var(--volna98-text);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .volna-topbar-user-98 span {
    margin-top: 3px;
    color:
      var(--volna98-muted);
    font-size: 8px;
  }

  .volna-desktop-main-98 {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding:
      calc(var(--volna98-topbar) + 22px)
      24px
      34px !important;
    background:
      var(--volna98-page) !important;
  }

  .volna-desktop-main-98
  .volna-dashboard-page-97 {
    max-width: 1480px;
    margin: 0 auto;
  }

  /*
   * Önceki alt menü görünümünü kesin olarak kapatır.
   */
  body.volna-desktop-active-98
  > nav,
  body.volna-desktop-active-98
  #app > nav {
    position: static !important;
  }
}

@media (
  min-width: 1024px
) and (
  max-width: 1250px
) {
  :root {
    --volna98-sidebar: 200px;
  }

  .volna-desktop-topbar-98 {
    grid-template-columns:
      minmax(220px, 300px)
      minmax(230px, 1fr)
      auto;
  }

  .volna-topbar-user-98
  > div:last-child {
    display: none;
  }

  .volna-topbar-user-98 {
    min-width: auto;
  }

  .volna-project-info-grid-97 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* VOLNA NEW PROJECT BUTTON 104 */

@media (min-width: 1024px) {
  .volna-new-project-button-104 {
    min-height: 40px !important;
    padding: 0 15px !important;
    border:
      1px solid #102f73 !important;
    border-radius: 9px !important;
    background:
      #102f73 !important;
    color:
      #ffffff !important;
    box-shadow:
      0 6px 14px
      rgba(16, 47, 115, 0.18) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    white-space: nowrap;
  }

  .volna-new-project-button-104:hover {
    background:
      #0b255c !important;
  }
}

/* VOLNA WORKS DESKTOP DESIGN 105 */

@media (min-width: 1024px) {
  .volna-works-project-card-105 {
    min-height: 180px !important;
    padding: 20px !important;
    display: grid !important;
    grid-template-columns:
      132px
      minmax(260px, 1fr)
      minmax(520px, 1.8fr) !important;
    align-items: center;
    gap: 22px !important;
    border:
      1px solid #e2e8f1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow:
      0 8px 24px
      rgba(24, 49, 91, 0.055) !important;
  }

  .volna-project-visual-105 {
    position: relative;
    width: 132px;
    height: 132px;
  }

  .volna-vessel-picture-105 {
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
    background:
      linear-gradient(
        145deg,
        #e7effb,
        #f8fbff
      );
  }

  .volna-vessel-picture-105 img {
    width: 82px;
    height: 92px;
    object-fit: contain;
  }

  .volna-active-project-105 {
    position: absolute;
    top: 9px;
    right: -103px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #dcf4ee;
    color: #087d6d;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
  }

  .volna-works-project-card-105
  > div:nth-child(2) {
    min-width: 0;
    padding-top: 25px;
  }

  .volna-works-project-card-105
  > div:nth-child(2)
  > span:first-child {
    display: none;
  }

  .volna-works-project-card-105 h2 {
    margin: 0 0 10px !important;
    color: #172746 !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    line-height: 1.1;
  }

  .volna-works-project-card-105
  #projectMeta {
    max-width: 560px;
    margin: 0 !important;
    color: #687890 !important;
    font-size: 12px !important;
    line-height: 1.7;
  }

  .volna-project-actions-105 {
    align-self: stretch;
    padding: 13px 0 0 22px;
    display: flex !important;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px !important;
    border-left:
      1px solid #e6ebf2;
  }

  .volna-project-actions-105 button {
    min-height: 40px !important;
    padding: 0 15px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    font-weight: 750 !important;
  }

  .volna-project-actions-105
  #newProject,
  .volna-project-actions-105
  #newWork {
    background: #102f73 !important;
    color: #ffffff !important;
  }

  .volna-project-actions-105
  #deleteProject {
    border-color: #ffdada !important;
    background: #ffeded !important;
    color: #c92b2b !important;
  }

  .volna-works-stats-105 {
    margin: 16px 0 !important;
    display: grid !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .volna-works-stats-105 .stat {
    position: relative;
    min-height: 108px !important;
    padding: 20px 20px 20px 76px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    border:
      1px solid #e2e8f1 !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    box-shadow:
      0 6px 18px
      rgba(24, 49, 91, 0.045) !important;
  }

  .volna-works-stats-105
  .stat::before {
    position: absolute;
    left: 20px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
  }

  .volna-works-stats-105
  .stat:nth-child(1)::before {
    content: "▣";
    background: #e8f0ff;
    color: #2468d4;
  }

  .volna-works-stats-105
  .stat:nth-child(2)::before {
    content: "✓";
    background: #e6f6e8;
    color: #32a74c;
  }

  .volna-works-stats-105
  .stat:nth-child(3)::before {
    content: "◷";
    background: #ffe8e8;
    color: #e33d3d;
  }

  .volna-works-stats-105
  .stat:nth-child(4)::before {
    content: "⌛";
    background: #fff0df;
    color: #e48319;
  }

  .volna-works-stats-105 .stat b {
    order: 2;
    color: #172746 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
  }

  .volna-works-stats-105 .stat small {
    order: 1;
    margin-bottom: 4px;
    color: #708099 !important;
    font-size: 10px !important;
    font-weight: 700;
  }

  .volna-works-panel-105 {
    padding: 0 !important;
    overflow: hidden;
    border:
      1px solid #e2e8f1 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow:
      0 8px 24px
      rgba(24, 49, 91, 0.05) !important;
  }

  .volna-work-list-heading-105 {
    min-height: 61px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom:
      1px solid #e7ebf1;
  }

  .volna-work-list-heading-105 > div {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .volna-work-list-heading-105 h2 {
    margin: 0;
    color: #172746;
    font-size: 16px;
    font-weight: 800;
  }

  #worksCount105 {
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e7edf6;
    color: #315278;
    font-size: 9px;
    font-weight: 800;
  }

  .volna-work-filters-105 {
    margin: 0 !important;
    padding: 14px 17px !important;
    display: grid !important;
    grid-template-columns:
      minmax(300px, 1fr)
      170px
      170px !important;
    gap: 10px !important;
    border-bottom:
      1px solid #e7ebf1;
    background: #fbfcfe;
  }

  .volna-work-filters-105 input,
  .volna-work-filters-105 select {
    height: 42px !important;
    min-height: 42px !important;
    border:
      1px solid #dce3ed !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #34445e !important;
    font-size: 11px !important;
  }

  .volna-work-table-scroll-105 {
    overflow-x: auto;
  }

  .volna-work-table-105 {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
  }

  .volna-work-table-105 th {
    height: 43px;
    padding: 9px 12px;
    border-bottom:
      1px solid #e5eaf1;
    background: #f8fafd;
    color: #71809a;
    font-size: 8px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .volna-work-table-105 td {
    min-height: 60px;
    padding: 10px 12px;
    border-bottom:
      1px solid #edf0f5;
    color: #41516a;
    font-size: 10px;
    vertical-align: middle;
  }

  .volna-work-table-105 tbody
  tr:hover {
    background: #fafcff;
  }

  .volna-work-no-105 {
    color: #24518e;
    font-size: 10px;
  }

  .volna-work-title-105 {
    min-width: 210px;
    max-width: 310px;
    display: flex;
    flex-direction: column;
  }

  .volna-work-title-105 strong {
    overflow: hidden;
    color: #21324e;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .volna-work-title-105 span {
    margin-top: 4px;
    overflow: hidden;
    color: #8490a3;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .volna-responsible-105 {
    min-width: 135px;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .volna-responsible-105 > span {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #153a7c;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
  }

  .volna-responsible-105 strong {
    overflow: hidden;
    color: #34445e;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .volna-status-select-105 {
    min-width: 120px;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 27px 0 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background-color: #e7f0ff !important;
    color: #2769d1 !important;
    font-size: 9px !important;
    font-weight: 750 !important;
  }

  .volna-status-select-105.completed,
  .volna-status-select-105.closed {
    background-color: #e5f6e8 !important;
    color: #2b963f !important;
  }

  .volna-status-select-105.waiting,
  .volna-status-select-105.pending {
    background-color: #fff0de !important;
    color: #d67512 !important;
  }

  .volna-progress-editor-105 {
    min-width: 145px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .volna-progress-track-105 {
    width: 75px;
    height: 6px;
    overflow: hidden;
    border-radius: 4px;
    background: #e5eaf1;
  }

  .volna-progress-track-105 i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #168d84;
  }

  .volna-progress-editor-105 input {
    width: 39px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 3px !important;
    border:
      1px solid #dce3ed !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    text-align: center;
  }

  .volna-progress-editor-105 > span {
    color: #728099;
    font-size: 9px;
  }

  .volna-priority-badge-105 {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 6px;
    background: #fff0de;
    color: #d67512;
    font-size: 8px;
    font-weight: 800;
  }

  .volna-priority-badge-105.high,
  .volna-priority-badge-105.critical {
    background: #ffe8e8;
    color: #d83333;
  }

  .volna-priority-badge-105.low {
    background: #e7f0ff;
    color: #2769d1;
  }

  .volna-row-actions-105 {
    min-width: 150px;
    display: flex;
    gap: 5px;
  }

  .volna-row-actions-105 button {
    min-height: 31px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    font-size: 8px !important;
    white-space: nowrap;
  }

  .volna-work-table-footer-105 {
    min-height: 54px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #738198;
    font-size: 9px;
    border-top:
      1px solid #e7ebf1;
  }

  .volna-work-empty-105 {
    min-height: 250px;
    padding: 45px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #7e8ba0;
    text-align: center;
  }

  .volna-work-empty-icon-105 {
    width: 58px;
    height: 58px;
    margin-bottom: 13px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9f0fb;
    color: #2869ce;
    font-size: 23px;
  }

  .volna-work-empty-105 strong {
    margin-bottom: 6px;
    color: #263650;
    font-size: 14px;
  }

  .volna-work-empty-105 span {
    margin-bottom: 18px;
    font-size: 10px;
  }

  .volna-work-empty-105 button {
    min-height: 39px !important;
    padding: 0 15px !important;
    border-radius: 8px !important;
    background: #102f73 !important;
    color: #ffffff !important;
    font-size: 10px !important;
  }
}

@media (
  min-width: 1024px
) and (
  max-width: 1280px
) {
  .volna-works-project-card-105 {
    grid-template-columns:
      110px minmax(220px, 1fr) !important;
  }

  .volna-project-visual-105,
  .volna-vessel-picture-105 {
    width: 110px;
    height: 110px;
  }

  .volna-project-actions-105 {
    grid-column: 1 / -1;
    padding: 15px 0 0;
    border-top:
      1px solid #e6ebf2;
    border-left: 0;
  }

  .volna-active-project-105 {
    right: -112px;
  }
}

@media (max-width: 1023px) {
  .volna-project-visual-105,
  .volna-work-list-heading-105 {
    display: none !important;
  }
}

/* VOLNA PROJECT ENGINEERS UI 107C */

.volna-engineers-dialog-107c {
  width: min(760px, calc(100vw - 28px));
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 28px 80px
    rgba(15, 35, 75, 0.28);
}

.volna-engineers-dialog-107c::backdrop {
  background:
    rgba(16, 29, 51, 0.58);
  backdrop-filter: blur(3px);
}

.volna-engineers-dialog-107c form {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.volna-engineers-header-107c {
  padding: 23px 25px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom:
    1px solid #e7ebf2;
  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #ffffff
    );
}

.volna-engineers-kicker-107c {
  display: block;
  margin-bottom: 6px;
  color: #20786d;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.2px;
}

.volna-engineers-header-107c h2 {
  margin: 0 0 7px;
  color: #182b4c;
  font-size: 23px;
  font-weight: 850;
}

.volna-engineers-header-107c p {
  margin: 0;
  color: #718097;
  font-size: 11px;
  line-height: 1.6;
}

.volna-engineers-close-107c {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  flex: 0 0 auto;
  border-radius: 9px !important;
}

.volna-engineers-summary-107c {
  padding: 16px 25px;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-bottom:
    1px solid #e7ebf2;
  background: #fbfcfe;
}

.volna-primary-engineer-card-107c,
.volna-extra-engineers-card-107c {
  min-height: 86px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border:
    1px solid #e0e7f0;
  border-radius: 12px;
  background: #ffffff;
}

.volna-primary-engineer-card-107c {
  border-color: #cce9e3;
  background: #f3fbf9;
}

.volna-primary-engineer-card-107c span,
.volna-extra-engineers-card-107c span {
  margin-bottom: 6px;
  color: #74839a;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.6px;
}

.volna-primary-engineer-card-107c strong,
.volna-extra-engineers-card-107c strong {
  color: #1e304e;
  font-size: 13px;
  line-height: 1.4;
}

.volna-primary-engineer-card-107c small,
.volna-extra-engineers-card-107c small {
  margin-top: 5px;
  color: #8490a3;
  font-size: 9px;
}

.volna-engineers-empty-summary-107c {
  grid-column: 1 / -1;
  padding: 18px;
  border:
    1px dashed #ccd5e1;
  border-radius: 11px;
  color: #7a879a;
  font-size: 11px;
  text-align: center;
}

.volna-engineers-toolbar-107c {
  padding: 14px 25px;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  border-bottom:
    1px solid #e7ebf2;
}

.volna-engineers-toolbar-107c input {
  min-height: 40px !important;
  border-radius: 9px !important;
}

.volna-engineers-toolbar-107c span {
  color: #65748c;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.volna-engineers-list-107c {
  min-height: 170px;
  max-height: 315px;
  padding: 8px 25px;
  overflow-y: auto;
}

.volna-engineer-row-107c {
  min-height: 65px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom:
    1px solid #edf0f5;
}

.volna-engineer-select-107c {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}

.volna-engineer-select-107c
input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.volna-engineer-avatar-107c {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #153a7c;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
}

.volna-engineer-person-107c {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.volna-engineer-person-107c strong {
  overflow: hidden;
  color: #243653;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.volna-engineer-person-107c small {
  margin-top: 4px;
  overflow: hidden;
  color: #7c899c;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.volna-primary-choice-107c {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #4c5e77;
  font-size: 9px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.volna-primary-choice-107c
input {
  width: 16px;
  height: 16px;
}

.volna-engineers-permissions-107c {
  margin: 12px 25px 0;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  border:
    1px solid #e1e7ef;
  border-radius: 11px;
  background: #f8fafc;
}

.volna-engineers-permissions-107c
strong {
  width: 100%;
  margin-bottom: 2px;
  color: #30435f;
  font-size: 10px;
}

.volna-engineers-permissions-107c
span {
  padding: 5px 8px;
  border-radius: 6px;
  background: #e6f5f1;
  color: #167668;
  font-size: 8px;
  font-weight: 750;
}

.volna-engineers-permissions-107c
small {
  width: 100%;
  margin-top: 3px;
  color: #8490a2;
  font-size: 8px;
}

.volna-engineers-actions-107c {
  padding: 18px 25px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.volna-engineers-actions-107c
button {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.volna-engineers-button-107c {
  border-color: #bcdad5 !important;
  background: #eef9f6 !important;
  color: #147569 !important;
}

.volna-engineers-loading-107c,
.volna-engineers-error-107c,
.volna-engineers-empty-107c {
  min-height: 160px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #7b889b;
  font-size: 11px;
  text-align: center;
}

.volna-engineers-error-107c {
  color: #bd3030;
}

.volna-engineers-empty-107c strong {
  margin-bottom: 7px;
  color: #30415c;
  font-size: 12px;
}

@media (max-width: 700px) {
  .volna-engineers-summary-107c {
    grid-template-columns: 1fr;
  }

  .volna-engineers-toolbar-107c {
    grid-template-columns: 1fr;
  }

  .volna-engineer-row-107c {
    align-items: flex-start;
    flex-direction: column;
  }

  .volna-primary-choice-107c {
    margin-left: 28px;
  }
}

/* =========================================================
   VOLNA MOBILE NAVIGATION — 108B
   Mevcut openTab ve modül geçişleri korunur.
   ========================================================= */

@media (max-width: 700px) {
  body.has-mobile-bottom-nav {
    padding-bottom:
      calc(78px + env(safe-area-inset-bottom)) !important;
  }

  body > #mobileBottomNav.mobile-bottom-nav {
    position: fixed !important;
    z-index: 99990 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    height:
      calc(74px + env(safe-area-inset-bottom)) !important;

    margin: 0 !important;
    padding:
      5px 9px
      env(safe-area-inset-bottom) !important;

    display: grid !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 2px !important;

    border: 0 !important;
    border-top:
      1px solid #dfe5ed !important;
    border-radius: 21px 21px 0 0 !important;

    background:
      rgba(255, 255, 255, 0.98) !important;

    box-shadow:
      0 -9px 28px
      rgba(11, 28, 57, 0.11) !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    overflow: hidden !important;
    transform: translateZ(0) !important;
  }

  body > #mobileBottomNav.mobile-bottom-nav button {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 63px !important;
    min-height: 63px !important;
    max-height: 63px !important;

    margin: 0 !important;
    padding: 8px 2px 5px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    border: 0 !important;
    border-radius: 13px !important;

    background: transparent !important;
    color: #718098 !important;

    box-shadow: none !important;
    transform: none !important;
    transition:
      background 0.18s ease,
      color 0.18s ease !important;
  }

  body > #mobileBottomNav.mobile-bottom-nav
  button::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    left: 50% !important;

    width: 35px !important;
    height: 3px !important;

    border-radius: 999px !important;
    background: transparent !important;

    transform: translateX(-50%) !important;
  }

  body > #mobileBottomNav.mobile-bottom-nav
  button.active,
  body > #mobileBottomNav.mobile-bottom-nav
  button.is-active {
    background:
      rgba(18, 25, 101, 0.075) !important;
    color: #121965 !important;
  }

  body > #mobileBottomNav.mobile-bottom-nav
  button.active::before,
  body > #mobileBottomNav.mobile-bottom-nav
  button.is-active::before {
    background: #1468d6 !important;
  }

  body > #mobileBottomNav
  .mobile-bottom-icon {
    flex: 0 0 auto !important;

    width: 27px !important;
    height: 27px !important;

    display: grid !important;
    place-items: center !important;

    color: inherit !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  body > #mobileBottomNav
  .mobile-bottom-label {
    width: 100% !important;
    overflow: hidden !important;

    color: inherit !important;
    font-size: 9px !important;
    font-weight: 760 !important;
    line-height: 12px !important;

    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body > #mobileMoreOverlay.mobile-more-overlay {
    position: fixed !important;
    z-index: 99991 !important;
    inset: 0 !important;

    display: block !important;

    background:
      rgba(4, 16, 36, 0.55) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;

    transition:
      opacity 0.22s ease,
      visibility 0.22s ease !important;
  }

  body > #mobileMoreOverlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body > #mobileMorePanel.mobile-more-panel {
    position: fixed !important;
    z-index: 99992 !important;

    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;
    max-height: 78dvh !important;

    margin: 0 !important;
    padding:
      12px 16px
      calc(22px + env(safe-area-inset-bottom)) !important;

    display: block !important;
    overflow-y: auto !important;

    border: 0 !important;
    border-radius: 25px 25px 0 0 !important;

    background: #ffffff !important;

    box-shadow:
      0 -25px 65px
      rgba(5, 20, 45, 0.26) !important;

    visibility: hidden !important;
    transform: translateY(105%) !important;

    transition:
      transform 0.25s ease,
      visibility 0.25s ease !important;
  }

  body > #mobileMorePanel.mobile-more-panel.is-open {
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  #mobileMorePanel .mobile-more-header {
    min-height: 61px !important;
    padding: 2px 2px 13px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;

    border-bottom:
      1px solid #e8ecf2 !important;
  }

  #mobileMorePanel .mobile-more-header > div {
    display: flex !important;
    flex-direction: column !important;
  }

  #mobileMorePanel .mobile-more-header strong {
    color: #142746 !important;
    font-size: 17px !important;
    font-weight: 820 !important;
  }

  #mobileMorePanel .mobile-more-header small {
    margin-top: 5px !important;
    color: #7a879b !important;
    font-size: 9px !important;
  }

  #mobileMorePanel #closeMobileMorePanel {
    width: 37px !important;
    min-width: 37px !important;
    height: 37px !important;
    min-height: 37px !important;

    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: #f0f3f7 !important;
    color: #4e6078 !important;

    font-size: 22px !important;
    line-height: 1 !important;
  }

  #mobileMorePanel .mobile-more-list {
    padding-top: 12px !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  #mobileMorePanel .mobile-more-item {
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 8px 11px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;

    border:
      1px solid #e3e8ef !important;
    border-radius: 13px !important;

    background: #fafbfd !important;
    color: #203652 !important;

    font-size: 11px !important;
    font-weight: 720 !important;

    box-shadow: none !important;
  }

  #mobileMorePanel .mobile-more-item:active {
    border-color:
      rgba(18, 25, 101, 0.25) !important;
    background:
      rgba(18, 25, 101, 0.075) !important;
  }

  #mobileMorePanel
  .mobile-more-item-left {
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
  }

  #mobileMorePanel
  .mobile-more-item-icon {
    width: 39px !important;
    height: 39px !important;

    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;

    border-radius: 11px !important;

    background: #edf3ff !important;
    color: #121965 !important;

    font-size: 18px !important;
  }

  #mobileMorePanel .mobile-more-item b {
    color: #7b899d !important;
    font-size: 21px !important;
    font-weight: 500 !important;
  }
}


/* =========================================================
   VOLNA MOBİL ÇİFT MENÜ DÜZELTMESİ — 108C
   Work Control altındaki yatay masaüstü menüsünü gizler.
   Sabit mobil alt menü korunur.
   ========================================================= */

@media (max-width: 700px) {
  /*
   * Uygulama içindeki eski/masaüstü sekme menüleri.
   * Body altındaki #mobileBottomNav bu seçimlerin dışındadır.
   */
  #app nav:not(#mobileBottomNav),
  #app > nav:not(#mobileBottomNav),
  #app main > nav:not(#mobileBottomNav),
  #app header + nav:not(#mobileBottomNav),
  #app .volna-desktop-navigation-96,
  #app .volna-desktop-navigation-98,
  #app [class*="volna-desktop-navigation"],
  #app [class*="desktop-navigation"] {
    display: none !important;
    visibility: hidden !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Yatay menünün bıraktığı boşluğu kaldırır.
   */
  #app main,
  #app .volna-desktop-main-96,
  #app .volna-desktop-main-98 {
    margin-top: 0 !important;
  }

  /*
   * Gerçek mobil alt menü görünür ve kullanılabilir kalır.
   */
  body > #mobileBottomNav.mobile-bottom-nav {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body > #mobileBottomNav.mobile-bottom-nav button {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* =========================================================
   VOLNA MOBİL ÜST LOGO KALDIRMA — 108D
   Yalnızca mobildeki büyük Volna Marine marka alanını gizler.
   ========================================================= */

@media (max-width: 700px) {
  #app .volna-mobile-brand-96 {
    display: none !important;
    visibility: hidden !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   VOLNA AKTİF MOBİL ÜST MENÜ — 108G
   Aktif 98 kabuğunu mobil görünüme uyarlar.
   ========================================================= */

@media (max-width: 700px) {
  body.volna-desktop-active-98 {
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #f3f6fa !important;
  }

  #app.volna-app-shell-98 {
    min-height: 100vh !important;
    display: block !important;
    background: #f3f6fa !important;
  }

  /* Büyük masaüstü logo ve yan panel tamamen gizlenir. */
  #app .volna-desktop-sidebar-98,
  #app .volna-desktop-brand-98,
  #app .volna-menu-title-98,
  #app .volna-sidebar-footer-98 {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  #app .volna-desktop-workspace-98 {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f3f6fa !important;
  }

  /* Lacivert üst başlık. */
  #app .volna-desktop-topbar-98 {
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;

    width: calc(100% - 20px) !important;
    height: auto !important;
    min-height: 172px !important;

    margin: 10px 10px 0 !important;
    padding: 18px 14px 14px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 56px auto !important;
    align-items: center !important;
    gap: 13px 10px !important;

    border: 0 !important;
    border-radius: 22px !important;

    background:
      radial-gradient(
        circle at 7% 0%,
        rgba(45, 123, 176, 0.30),
        transparent 38%
      ),
      linear-gradient(
        135deg,
        #07182f 0%,
        #09213f 58%,
        #041228 100%
      ) !important;

    box-shadow:
      0 10px 28px
      rgba(5, 23, 49, 0.22) !important;
  }

  /* Küçük marka başlığı. */
  #app .volna-desktop-topbar-98::before {
    content: "V  VOLNA" !important;

    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;

    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 1.1px !important;
    white-space: nowrap !important;
  }

  #app .volna-desktop-topbar-98::after {
    content: "Work Control" !important;

    position: absolute !important;
    top: 47px !important;
    left: 48px !important;

    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    letter-spacing: 0.7px !important;
  }

  /* Arama mobilde gösterilmez. */
  #app .volna-topbar-search-98 {
    display: none !important;
  }

  /* Sağ üst bildirim ve kullanıcı alanı. */
  #app .volna-topbar-actions-98 {
    grid-column: 2 !important;
    grid-row: 1 !important;

    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  #app .volna-bell-host-98,
  #app .volna-topbar-user-98 {
    flex: 0 0 auto !important;
  }

  #app .volna-bell-host-98 #bell,
  #app .volna-topbar-user-98 {
    width: 43px !important;
    min-width: 43px !important;
    height: 43px !important;
    min-height: 43px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border:
      1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 13px !important;

    background:
      rgba(55, 91, 130, 0.48) !important;
    color: #ffffff !important;

    box-shadow: none !important;
  }

  #app .volna-bell-host-98 #bell {
    position: relative !important;
    overflow: visible !important;

    font-size: 0 !important;
  }

  #app .volna-bell-host-98 #bell::before {
    content: "🔔" !important;
    font-size: 19px !important;
    line-height: 1 !important;
  }

  #app .volna-bell-host-98 #unread {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;

    min-width: 19px !important;
    height: 19px !important;
    padding: 0 4px !important;

    display: grid !important;
    place-items: center !important;

    border: 2px solid #07182f !important;
    border-radius: 999px !important;

    background: #26a58f !important;
    color: #ffffff !important;

    font-size: 9px !important;
    font-weight: 800 !important;
  }

  #app .volna-topbar-avatar-98 {
    width: 27px !important;
    height: 27px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50% !important;

    background: #ffffff !important;
    color: #173552 !important;

    font-size: 13px !important;
    font-weight: 850 !important;
  }

  #app .volna-topbar-user-98 > div:last-child {
    display: none !important;
  }

  #app .volna-logout-host-98 {
    display: none !important;
  }

  /* Proje / Gemi seçim kartı. */
  #app .volna-topbar-project-98 {
    position: relative !important;

    grid-column: 1 / -1 !important;
    grid-row: 2 !important;

    width: 100% !important;
    min-height: 74px !important;

    margin: 0 !important;
    padding: 11px 40px 10px 57px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 16px !important;

    background: #ffffff !important;

    box-shadow:
      0 7px 20px
      rgba(3, 17, 39, 0.16) !important;
  }

  #app .volna-topbar-project-98::before {
    content: "⚓" !important;

    position: absolute !important;
    top: 50% !important;
    left: 13px !important;

    width: 34px !important;
    height: 34px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 10px !important;

    background: #e9f3f4 !important;
    color: #145069 !important;

    font-size: 18px !important;

    transform: translateY(-50%) !important;
  }

  #app .volna-topbar-project-98::after {
    content: "⌄" !important;

    position: absolute !important;
    top: 50% !important;
    right: 14px !important;

    color: #77869a !important;
    font-size: 17px !important;

    transform: translateY(-50%) !important;
  }

  #app .volna-topbar-project-98 > span {
    margin: 0 0 5px !important;

    color: #77869a !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  #app .volna-project-select-host-98,
  #app .volna-project-select-host-98 select {
    width: 100% !important;
  }

  #app .volna-project-select-host-98 select {
    height: 29px !important;
    min-height: 29px !important;

    margin: 0 !important;
    padding: 0 22px 0 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    background: transparent !important;
    color: #182a43 !important;

    font-size: 14px !important;
    font-weight: 780 !important;

    box-shadow: none !important;
  }

  #app .volna-desktop-main-98,
  #app .volna-desktop-main-96 {
    margin: 0 !important;
    padding-top: 14px !important;
  }
}

/* 22 düzeni: yerleşimi değiştirmeyen dil seçici */
.languagePicker{display:flex;grid-template-columns:auto auto;align-items:center;gap:6px;margin:0;color:inherit;white-space:nowrap}
.languagePicker span{font-size:12px;font-weight:700}
.languagePicker select{min-width:72px;padding:9px 28px 9px 10px}
.loginLanguage{justify-content:flex-end;margin:-10px 0 14px;color:#60706e}
.headerLanguage select{margin-left:0;max-width:none;width:auto}
/* Uygulama içi seçici, sonradan kurulan masaüstü/mobil kabuklardan etkilenmez. */
#appLanguageDock{display:flex!important;position:fixed!important;right:16px!important;bottom:18px!important;z-index:10020!important;margin:0!important;padding:7px 9px!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:12px!important;background:#0c2d29!important;color:#fff!important;box-shadow:0 8px 24px rgba(0,0,0,.22)!important}
#appLanguageDock select{display:block!important;position:static!important;visibility:visible!important;opacity:1!important;order:initial!important;width:76px!important;min-width:76px!important;height:auto!important;margin:0!important;padding:8px 26px 8px 9px!important;background:#fff!important;color:#102027!important}
@media(max-width:760px){#appLanguageDock{right:12px!important;bottom:82px!important}#appLanguageDock span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.loginLanguage select{width:auto}}

/* Kurumsal tema sistemi */
:root,[data-theme="maritime"]{--theme-primary:#0b7669;--theme-primary-strong:#075d54;--theme-header:#0c2d29;--theme-bg:#eef4f3;--theme-card:#fff;--theme-text:#102027;--theme-muted:#60706e;--theme-soft:#e6f0ee;--theme-border:#cbd8d6;--theme-accent:#d5a84b;--theme-focus:rgba(11,118,105,.18);--theme-brand-glow:rgba(30,178,160,.25)}
[data-theme="ocean"]{--theme-primary:#1769aa;--theme-primary-strong:#0e5188;--theme-header:#0a3157;--theme-bg:#edf5fb;--theme-card:#fff;--theme-text:#122b40;--theme-muted:#617487;--theme-soft:#e2eff9;--theme-border:#c7d9e7;--theme-accent:#dc9d36;--theme-focus:rgba(23,105,170,.18);--theme-brand-glow:rgba(42,145,214,.28)}
[data-theme="graphite"]{--theme-primary:#53616d;--theme-primary-strong:#3e4a54;--theme-header:#1f2933;--theme-bg:#f0f2f4;--theme-card:#fff;--theme-text:#202b33;--theme-muted:#68747d;--theme-soft:#e7eaed;--theme-border:#cfd5d9;--theme-accent:#c18c43;--theme-focus:rgba(83,97,109,.2);--theme-brand-glow:rgba(150,164,175,.25)}
body{background:var(--theme-bg);color:var(--theme-text);transition:background-color .2s ease,color .2s ease}
header,#appPreferenceDock{background:var(--theme-header)!important}
button:not(.danger):not(.ghost):not(.themeChoice){background:var(--theme-primary)}
button:not(.danger):not(.ghost):not(.themeChoice):hover{background:var(--theme-primary-strong)}
.ghost,nav button{background:var(--theme-soft)!important;color:var(--theme-text)!important}
nav button.active{background:var(--theme-primary)!important;color:#fff!important}
.card,.panel,.hero,.stat,.moneyCard,.rowCard,.fieldOperationCard{background-color:var(--theme-card)}
input,select,textarea{border-color:var(--theme-border)}
input:focus,select:focus,textarea:focus{border-color:var(--theme-primary);box-shadow:0 0 0 3px var(--theme-focus);outline:none}
.badge{background:var(--theme-soft)}
.progress i,.budgetBar i{background:var(--theme-primary)}
.file a{color:var(--theme-primary)}

/* Kurumsal giriş ekranı */
#login.loginPage{position:relative;min-height:100svh;padding:clamp(20px,4vw,54px);background:
  radial-gradient(circle at 10% 15%,var(--theme-brand-glow),transparent 28%),
  radial-gradient(circle at 90% 85%,var(--theme-focus),transparent 24%),
  linear-gradient(145deg,var(--theme-bg),#fff 48%,var(--theme-soft));overflow:hidden}
#login.loginPage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;background-image:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
.corporateLoginShell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);width:min(1080px,100%);min-height:650px;border:1px solid rgba(255,255,255,.78);border-radius:28px;overflow:hidden;background:var(--theme-card);box-shadow:0 30px 80px rgba(18,39,50,.18),0 4px 12px rgba(18,39,50,.08)}
.loginBrandPanel{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(36px,5vw,68px);overflow:hidden;color:#fff;background:
  radial-gradient(circle at 80% 12%,var(--theme-brand-glow),transparent 32%),
  linear-gradient(155deg,var(--theme-header),var(--theme-primary-strong))}
.loginBrandPanel::before{content:"";position:absolute;right:-16%;bottom:-18%;width:420px;height:420px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 58px rgba(255,255,255,.035),0 0 0 116px rgba(255,255,255,.025)}
.brandIdentity,.brandMessage,.brandAssurances{position:relative;z-index:1}
.brandIdentity{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:15px}
.brandWatermark{grid-row:1/3;width:54px;height:54px;object-fit:contain;filter:brightness(0) invert(1);opacity:.96}
.brandWordmark{font-size:31px;font-weight:850;letter-spacing:.22em;line-height:1}
.brandDivision{margin-top:7px;font-size:10px;font-weight:700;letter-spacing:.15em;opacity:.7}
.brandMessage{max-width:520px;margin:70px 0 auto}
.brandEyebrow,.secureAccess{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.17em;color:var(--theme-accent)}
.brandEyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.brandMessage h1{max-width:500px;margin:18px 0 18px;font-size:clamp(36px,4vw,55px);line-height:1.08;letter-spacing:-.035em;color:#fff}
.brandMessage p{max-width:470px;margin:0;font-size:16px;line-height:1.75;color:rgba(255,255,255,.72)}
.brandAssurances{display:flex;flex-wrap:wrap;gap:9px;margin-top:42px}
.brandAssurances span{padding:8px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);font-size:11px;font-weight:700;color:rgba(255,255,255,.78)}
.corporateLoginForm{display:flex;flex-direction:column;justify-content:center;width:100%;padding:clamp(34px,5vw,66px);background:var(--theme-card)}
.loginPreferences{position:absolute;top:24px;right:27px;display:flex;align-items:center;gap:16px}
.loginPreferences .loginLanguage{margin:0;color:var(--theme-muted)}
.loginPreferences select{padding:8px 29px 8px 10px;border-radius:9px;background:var(--theme-bg)}
.themePicker{display:flex;align-items:center;gap:7px;color:var(--theme-muted)}
.themePicker>span{margin-right:2px;font-size:12px;font-weight:700}
.themeChoice{position:relative;width:25px;height:25px;min-width:25px;padding:0;border:3px solid var(--theme-card);border-radius:50%;box-shadow:0 0 0 1px var(--theme-border);transition:transform .16s ease,box-shadow .16s ease}
.themeChoice:hover{transform:translateY(-1px)}
.themeChoice.active{box-shadow:0 0 0 2px var(--theme-primary),0 3px 8px rgba(0,0,0,.16)}
.themeChoice[data-theme-choice="maritime"]{background:linear-gradient(135deg,#0c2d29 50%,#0b7669 50%)}
.themeChoice[data-theme-choice="ocean"]{background:linear-gradient(135deg,#0a3157 50%,#2a91d6 50%)}
.themeChoice[data-theme-choice="graphite"]{background:linear-gradient(135deg,#1f2933 50%,#8b98a3 50%)}
.loginHeading{margin-bottom:26px}
.loginHeading h2{margin:11px 0 8px;font-size:30px;line-height:1.2;letter-spacing:-.025em;color:var(--theme-text)}
.loginHeading p{margin:0;color:var(--theme-muted)}
.loginField{gap:9px;margin:0 0 17px;color:var(--theme-text);font-size:13px}
.loginField input{height:50px;padding:13px 14px;border-radius:12px;background:var(--theme-card)}
.loginField input::placeholder{color:#98a5ad}
.loginSubmit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:51px;margin-top:4px;border-radius:12px;box-shadow:0 8px 20px var(--theme-focus);font-size:14px}
.loginSubmit span{font-size:20px;font-weight:400;transition:transform .18s ease}
.loginSubmit:hover span{transform:translateX(4px)}
.loginSecurityNote{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;font-size:11px;color:var(--theme-muted)}
.loginSecurityNote span{font-size:8px;color:var(--theme-primary)}
.corporateLoginForm .error{min-height:20px;margin-top:10px;font-size:12px;text-align:center}
.loginFooter{position:absolute;z-index:1;right:clamp(22px,4vw,55px);bottom:18px;left:clamp(22px,4vw,55px);display:flex;justify-content:space-between;font-size:11px;color:var(--theme-muted)}

/* Uygulama içi tercih paneli */
#appPreferenceDock{position:fixed;right:16px;bottom:18px;z-index:10020;display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid rgba(255,255,255,.35);border-radius:13px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
#appPreferenceDock #appLanguageDock{position:static!important;display:flex!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
#appPreferenceDock #appLanguageDock select{width:72px!important;min-width:72px!important;padding:7px 24px 7px 8px!important}
#appPreferenceDock .themeChoice{width:22px;height:22px;min-width:22px;border-color:#fff}

@media(max-width:820px){
  #login.loginPage{align-items:start;padding:14px 14px 56px;overflow:auto}
  .corporateLoginShell{grid-template-columns:1fr;min-height:auto;border-radius:22px}
  .loginBrandPanel{min-height:230px;padding:28px}
  .brandIdentity{grid-template-columns:44px 1fr}.brandWatermark{width:44px;height:44px}.brandWordmark{font-size:25px}
  .brandMessage{margin:38px 0 0}.brandMessage h1{max-width:560px;margin:12px 0 10px;font-size:30px}.brandMessage p{font-size:14px;line-height:1.55}
  .brandAssurances{display:none}
  .corporateLoginForm{padding:30px 28px 32px}
  .loginPreferences{position:static!important;order:-1;justify-content:space-between;margin-bottom:28px}
  .loginHeading h2{font-size:26px}
  .loginFooter{bottom:15px}
  #appPreferenceDock{right:12px;bottom:82px}
}
@media(max-width:430px){
  .loginBrandPanel{min-height:214px;padding:24px}.brandMessage{margin-top:30px}.brandMessage h1{font-size:26px}.brandMessage p{font-size:13px}
  .corporateLoginForm{padding:28px 22px}.loginPreferences{margin-bottom:24px}.themePicker>span{display:none}
  .loginFooter{font-size:10px}
  #appPreferenceDock .appThemePicker{gap:5px}
}