/* Phone & tablet adjustments for the new site */
.main-header .user-menu .dropdown-toggle img { width: 36px; height: 36px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.row-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 3px; }
@media (max-width: 767px) {
  .content { padding: 12px !important; }
  .account-card { padding: 14px !important; }
  .account-content .header-part-active { padding: 0 !important; }
  .lang-switch { margin-right: 6px !important; padding: 4px 10px !important; }
  .main-header .navbar { padding-left: 8px; padding-right: 8px; }
  /* On small screens, the less important columns are hidden; tap the name to open the details */
  table#second-datas-table .hide-sm { display: none; }
  table#second-datas-table td, table#second-datas-table th { padding: 10px 6px !important; font-size: 14px; }
  .table-action a, .table-action button { padding: 6px 8px; font-size: 18px; }
  .card-body table th { width: auto !important; }
  .form-control { font-size: 16px; } /* avoids iPhone zooming into fields */
  .btn { min-height: 44px; }
}
/* Bigger choice boxes for fingers */
.select2-container .select2-selection--single { height: 44px !important; display: flex; align-items: center; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 42px !important; }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px !important; }
.select2-results__option { padding: 10px 12px; }
/* Small screens: keep the action buttons (eye / pencil / bin) but make them compact */
@media (max-width: 767px) {
  table#second-datas-table .table-action .d-flex { gap: 2px; }
  table#second-datas-table .table-action a, table#second-datas-table .table-action button { padding: 6px 5px; }
}
/* Tablet: the narrow icon menu must not show cut sub-menus */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #body.sidebar-minified .left-sidebar:not(:hover) .sidebar .sub-menu,
  #body.sidebar-minified .left-sidebar:not(:hover) .sidebar .collapse.show { display: none !important; }
}

/* Too wide for the screen: hide the less important columns (set by app.js) */
table#second-datas-table.fit-narrow .hide-sm { display: none; }
table#second-datas-table.fit-wrap td.wrap-any { overflow-wrap: anywhere; }
/* Picker lists: show more names at once (finger scrolling a tiny box is hard) */
.select2-container--default .select2-results > .select2-results__options { max-height: 50vh !important; }
/* Side menu: use the device's own scrolling (the old scroll script did not move with a finger) */
.left-sidebar .sidebar { display: flex; flex-direction: column; height: 100%; }
.left-sidebar .app-brand { flex: 0 0 auto; }
.left-sidebar .slimScrollDiv { flex: 1 1 auto; min-height: 0; height: auto !important; overflow: visible !important; }
.left-sidebar .sidebar-scrollbar { flex: 1 1 auto; min-height: 0; height: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.left-sidebar .slimScrollBar, .left-sidebar .slimScrollRail { display: none !important; }
.left-sidebar { height: 100vh !important; height: 100dvh !important; max-height: 100dvh; }
.left-sidebar .sidebar-scrollbar { scrollbar-width: none; }
.left-sidebar .sidebar-scrollbar::-webkit-scrollbar { display: none; }
table#second-datas-table.fit-narrow2 .hide-xs { display: none; }
/* Page jump (app.js) */
.dataTables_wrapper .d-flex.my-3 { flex-wrap: wrap; gap: 10px; }
.page-jump label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; white-space: nowrap; }
.page-jump select { height: 40px; min-width: 72px; padding: 0 8px; font-size: 16px; border: 1px solid #cfd4dc; border-radius: 6px; background: #fff; }
@media (max-width: 767px) {
  /* the page picker covers the numbers; keep only << current >> so nothing runs off screen */
  .dataTables_paginate .page-item:not(.previous):not(.next):not(.active) { display: none; }
}
/* Menu height = the visible screen (set by app.js; older phone browsers count the toolbar in 100vh) */
.left-sidebar { height: var(--app-vh, 100dvh) !important; max-height: var(--app-vh, 100dvh); }
/* room under the last menu item so it can always be scrolled above the browser's bottom bar */
.left-sidebar .sidebar-scrollbar::after { content: ""; display: block; height: 96px; }
@media (max-width: 400px) {
  table#second-datas-table td, table#second-datas-table th { padding: 8px 3px !important; }
  table#second-datas-table .table-action a, table#second-datas-table .table-action button { padding: 5px 3px; }
}
/* Phones: the slide-in menu uses the 'sidebar-minified' class while OPEN, and the old template
   squashes opened sub-menus to 0 height unless a mouse hovers. Always give them their real height. */
@media (max-width: 767px) {
  .sidebar-minified .left-sidebar .nav li.has-sub.expand .collapse > .sub-menu { height: auto !important; opacity: 1 !important; }
}
@media (max-width: 767px) {
  /* ...and the template also hides the open menu's sub-items and names unless "hovered" (a finger can't hover) */
  .sidebar-minified .left-sidebar .nav li.has-sub.expand .collapse > .sub-menu li,
  .sidebar-minified .left-sidebar .nav > li > a > span,
  .sidebar-minified .left-sidebar .nav > li > a > .caret,
  .sidebar-minified .left-sidebar .app-brand .brand-name { visibility: visible !important; opacity: 1 !important; }
}

/* Which page this is (admin / supervisor / lending staff). Plain look, no extra colours */
.role-badge { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 6px 14px; margin: 0 12px 0 16px; border: 1px solid #c9d1e0; border-radius: 16px; background: #fff; color: #3a4256; font-size: 14px; font-weight: 600; white-space: nowrap; }
.role-badge .mdi { font-size: 17px; line-height: 1; color: #6b7389; }
@media (max-width: 767.98px) {
  .role-badge { padding: 4px 10px; margin: 0 0 0 10px; font-size: 13px; }
}

/* account type under the name, only when the type column has been hidden to fit a phone */
.role-under { display: none; }
table#second-datas-table.fit-narrow2 .role-under { display: block; color: #6b7389; font-size: 13px; line-height: 1.3; }

/* Tablets/phones (also turned sideways): the old template put 30px of empty space under the header buttons,
   which made the top bar thick. Keep it one slim bar. */
@media (max-width: 991.98px) {
  .main-header .navbar-right .nav { margin-bottom: 0; }
  /* phones and tablets: log out from the round name button (top right) instead, so the top bar fits on one line */
  .main-header .header-logout { display: none !important; }
}

/* Tablets and phones: short label (icon + Admin / Superviseur / Agent) and smaller buttons, so the top bar stays on one line */
.role-badge .role-short { display: none; }
@media (max-width: 991.98px) {
  .role-badge .role-long { display: none; }
  .role-badge .role-short { display: inline; }
  .main-header .navbar { flex-wrap: nowrap; }
  .role-badge { flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 575.98px) {
  .main-header #sidebar-toggler { padding-left: 8px; padding-right: 8px; }
  .main-header .user-menu .dropdown-toggle { padding: 0 4px !important; white-space: nowrap; }
  .main-header .user-menu .dropdown-toggle::after { display: none; }
  .role-badge { flex-shrink: 0; white-space: nowrap; }
  .role-badge { margin-left: 8px; padding: 4px 8px; font-size: 13px; min-width: 0; }
  .main-header .navbar-right .nav { padding-left: 6px; padding-right: 6px; }
  .main-header .lang-switch { padding: 4px 6px !important; margin-right: 4px !important; font-size: 13px !important; }
}

/* Login history filters: side by side on wide screens, one under another on phones */
.login-filter { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.login-filter label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 14px; flex: 1 1 200px; }
.login-filter-buttons { display: flex; gap: 8px; }

/* Home cards: the whole card opens its page */
a.home-tile { display: flex; position: relative; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.home-tile:hover { box-shadow: 0 4px 14px rgba(34, 43, 61, .12); transform: translateY(-1px); text-decoration: none; }
a.home-tile:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(34, 43, 61, .12); }
a.home-tile .home-tile-go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #b5bccb; }
/* Same height for the cards in a row, round icons never squeezed, numbers on one line */
.home-tiles > [class*="col-"] { display: flex; margin-bottom: 24px; }
.home-tiles a.home-tile { width: 100%; margin-bottom: 0 !important; align-items: center; padding-right: 36px !important; }
.home-tiles a.home-tile .icon { flex: 0 0 70px; width: 70px; height: 70px; min-width: 70px; }
.home-tiles a.home-tile .media-body { min-width: 0; }
.home-tiles a.home-tile h4 { white-space: nowrap; }
.home-tiles a.home-tile p { margin-bottom: 0; line-height: 1.4; }
/* narrow cards (four in a row on a small laptop, or tablets): smaller circle and gap */
@media (min-width: 1200px) and (max-width: 1500px), (max-width: 575.98px) {
  .home-tiles a.home-tile { padding: 18px 32px 18px 18px !important; }
  .home-tiles a.home-tile .icon { flex-basis: 54px; width: 54px; height: 54px; min-width: 54px; line-height: 54px; margin-right: 14px !important; }
}

/* Menu: the sub-item of the page that is open (e.g. "Voir la liste") is green with a small dot */
.left-sidebar .sub-menu li.current-item > a .nav-text { color: #69c02b !important; font-weight: 600; }
.left-sidebar .sub-menu li.current-item > a .nav-text::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #69c02b; margin-right: 8px; vertical-align: middle; }

/* Admin looking at someone else's pages: a band at the top with the way back */
.view-as-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 16px 16px 0; padding: 10px 16px; border: 1px solid #c9d1e0; border-radius: 10px; background: #f1f4f9; color: #3a4256; font-size: 15px; }
.view-as-bar .mdi { color: #6b7389; }
.view-as-back { background: #fff; border: 1px solid #c9d1e0; color: #3a4256; font-weight: 600; border-radius: 16px; padding: 6px 14px; }
.view-as-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.view-as-item { margin: 0; }
.view-as-item button { width: 100%; display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 2px 8px; padding: 12px 14px; background: #fff; border: 1px solid #e3e7ef; border-radius: 10px; color: #3a4256; cursor: pointer; }
.view-as-item button:hover { box-shadow: 0 3px 10px rgba(34,43,61,.1); }
.view-as-item b { grid-column: 1; font-size: 15px; }
.view-as-item small { grid-column: 1; color: #6b7389; font-size: 13px; word-break: break-all; }
.view-as-item .mdi { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #b5bccb; font-size: 20px; }