/* App design system: modern light theme, spacing, radii, shadows */
:root {
  --brand: #6c5ce7; /* primary */
  --brand-2: #a06cd5; /* gradient mate */
  --text: #0f172a;
  --muted: #64748b;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --radius: 12px;
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
  --transition: 180ms ease;
}

/* Global */
body {
  color: var(--text);
  background: linear-gradient(180deg, rgba(108,92,231,0.06) 0%, rgba(240,246,255,0.6) 40%, rgba(255,255,255,1) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Navbar polish */
.app-navbar {
  background: linear-gradient(90deg, rgba(108,92,231,0.95) 0%, rgba(160,108,213,0.95) 100%);
  backdrop-filter: saturate(1.2) blur(6px);
  box-shadow: var(--shadow);
}

.navbar-brand { font-weight: 700; letter-spacing: .2px; }

/* Cards */
.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  background: var(--surface);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow); }
.card-header { background: transparent; font-weight: 600; }

/* Inputs */
.form-control, .form-select, .form-check-input {
  border-radius: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: rgba(108,92,231,.6);
  box-shadow: 0 0 0 .2rem rgba(108,92,231,.15);
}

/* Buttons */
.btn-brand {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #5b4bd6;
  --bs-btn-hover-border-color: #5b4bd6;
  --bs-btn-active-bg: #493ac7;
  --bs-btn-active-border-color: #493ac7;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(108,92,231, .25);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
}

/* Badges */
.badge-soft { background: rgba(108,92,231,.1); color: var(--brand); }

/* Shadows & depth */
.shadow-soft { box-shadow: var(--shadow-sm) !important; }
.shadow-float { box-shadow: var(--shadow) !important; }

/* Skeletons */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%);} }

/* Smooth transitions; respect reduced-motion */
* { transition: color var(--transition), background-color var(--transition), border-color var(--transition); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Toast container position */
.toast-container { z-index: 1090; }

/* Table tweaks */
.table > :not(caption) > * > * { border-color: var(--border) !important; }

/* Modern table styling */
.table-card { border-radius: var(--radius); overflow: hidden; }
.table-modern { --row-hover: rgba(108,92,231,.06); }
.table-modern thead th {
  background: linear-gradient(180deg, #fff, var(--surface-2));
  color: #334155;
  font-weight: 600;
  border-bottom: 1px solid var(--border) !important;
}
.table-modern tbody tr:hover { background: var(--row-hover); }
.table-modern td, .table-modern th { vertical-align: middle; }
.table-modern .cell-muted { color: var(--muted); }
.table-modern .cell-nowrap { white-space: nowrap; }
.table-toolbar { padding: .75rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.table-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.chip { display: inline-block; padding: .15rem .5rem; border-radius: 999px; background: rgba(15,23,42,.06); font-size: .8125rem; color: #475569; }

/* Token/URL truncation helpers */
.text-truncate-ellipsis { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

@media (max-width: 576px) {
  .text-truncate-ellipsis { max-width: 160px; }
}

/* Link hovers */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Mobile navbar language dropdown fixes */
@media (max-width: 576px) {
  /* Make dropdown usable on small screens (scoped to login page) */
  .page-login .navbar .dropdown-menu {
    max-height: 50vh;          /* prevent off-screen overflow */
    overflow-y: auto;          /* scroll if items exceed viewport */
    min-width: auto;           /* don't force desktop min-width */
    width: calc(100vw - 2rem); /* near full-width with safe gutters */
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;                   /* span across available width */
    right: 0;
    transform: none !important;/* avoid translating off-screen */
    z-index: 2100;             /* ensure it appears above page content */
  }

  /* Allow language names to wrap instead of overflowing */
  .page-login .navbar .dropdown-item { white-space: normal; }

  /* Register page dropdown: same mobile behavior */
  .page-register .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-register .navbar .dropdown-item { white-space: normal; }

  /* How-it-works page dropdown: same mobile behavior */
  .page-how-it-works .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-how-it-works .navbar .dropdown-item { white-space: normal; }

  /* Index (dashboard) page dropdown: same mobile behavior */
  .page-index .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-index .navbar .dropdown-item { white-space: normal; }

  /* Contacts list page dropdown: same mobile behavior */
  .page-contacts-list .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-contacts-list .navbar .dropdown-item { white-space: normal; }

  /* Contacts detail page dropdown */
  .page-contacts-detail .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-contacts-detail .navbar .dropdown-item { white-space: normal; }

  /* Loans list page dropdown */
  .page-loans-list .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-loans-list .navbar .dropdown-item { white-space: normal; }

  /* Loans new page dropdown */
  .page-loans-new .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-loans-new .navbar .dropdown-item { white-space: normal; }

  /* Loans detail page dropdown */
  .page-loans-detail .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-loans-detail .navbar .dropdown-item { white-space: normal; }

  /* Share links list page dropdown */
  .page-sharelinks-list .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-sharelinks-list .navbar .dropdown-item { white-space: normal; }

  /* Error generic page dropdown */
  .page-error-generic .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-error-generic .navbar .dropdown-item { white-space: normal; }

  /* Public borrower page dropdown */
  .page-public-borrower .navbar .dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
    min-width: auto;
    width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    left: 0;
    right: 0;
    transform: none !important;
    z-index: 2100;
  }
  .page-public-borrower .navbar .dropdown-item { white-space: normal; }
}

/* Ensure navbar/menu stacks above cards on login page (all viewports) */
.page-login .app-navbar { position: relative; z-index: 2000; }
.page-login .navbar .dropdown-menu { z-index: 2100; }

/* Ensure navbar/menu stacks above content on register and how-it-works pages */
.page-register .app-navbar { position: relative; z-index: 2000; }
.page-register .navbar .dropdown-menu { z-index: 2100; }
.page-how-it-works .app-navbar { position: relative; z-index: 2000; }
.page-how-it-works .navbar .dropdown-menu { z-index: 2100; }

/* Ensure navbar/menu stacks above content on index page */
.page-index .app-navbar { position: relative; z-index: 2000; }
.page-index .navbar .dropdown-menu { z-index: 2100; }

/* Ensure navbar/menu stacks above content on contacts pages */
.page-contacts-list .app-navbar { position: relative; z-index: 2000; }
.page-contacts-list .navbar .dropdown-menu { z-index: 2100; }
.page-contacts-detail .app-navbar { position: relative; z-index: 2000; }
.page-contacts-detail .navbar .dropdown-menu { z-index: 2100; }

/* Ensure navbar/menu stacks above content on loans pages */
.page-loans-list .app-navbar { position: relative; z-index: 2000; }
.page-loans-list .navbar .dropdown-menu { z-index: 2100; }
.page-loans-new .app-navbar { position: relative; z-index: 2000; }
.page-loans-new .navbar .dropdown-menu { z-index: 2100; }
.page-loans-detail .app-navbar { position: relative; z-index: 2000; }
.page-loans-detail .navbar .dropdown-menu { z-index: 2100; }

/* Ensure navbar/menu stacks above content on share links page */
.page-sharelinks-list .app-navbar { position: relative; z-index: 2000; }
.page-sharelinks-list .navbar .dropdown-menu { z-index: 2100; }

/* Ensure navbar/menu stacks above content on error generic page */
.page-error-generic .app-navbar { position: relative; z-index: 2000; }
.page-error-generic .navbar .dropdown-menu { z-index: 2100; }

/* Ensure navbar/menu stacks above content on public borrower page */
.page-public-borrower .app-navbar { position: relative; z-index: 2000; }
.page-public-borrower .navbar .dropdown-menu { z-index: 2100; }