/* mobile.css
   Suprascrieri pentru telefon si tableta.
   Pune aici regulile care trebuie sa suprascrie stilurile principale.
   Evita !important; foloseste specificitate sau ordinea fisierelor.
*/

/* MOBILE: up to 767px (phones) */
@media only screen and (max-width: 767px) {
  /* container adjustments */
  .container, .app-content, .page-wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* header / navbar */
  .navbar .menu { display: none !important; }
  .navbar .menu-toggle { display: block !important; }

  /* text sizes */
  body, p, label { font-size: 14px; line-height: 1.4; }

  /* buttons */
  .btn { padding: 10px 14px; font-size: 14px; }
  /* cards and tables - stack for small screens */
  .card .card-body { padding: 12px; }
  .table-responsive { overflow-x: auto; }

  /* example: make sidebar collapsible / hidden on small screens */
  .sidebar { transform: translateX(-100%); position: fixed; z-index: 9999; }
  .sidebar.open { transform: translateX(0); }
}

/* DataTables controls: stack and align left on mobile */
@media only screen and (max-width: 767px) {
  /* Make the length (Show x entries) and filter (Search) full-width blocks with left padding */
  /* Move the 'Show x entries' more to the left than the Search control */
  .dataTables_length, #example_length {
    display: block !important;
    width: calc(100% - 8px) !important; /* account for smaller left padding */
    padding-left: 4px !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }

  /* Keep the Search control slightly inset for visual separation */
  .dataTables_filter, #example_filter {
    display: block !important;
    width: calc(100% - 16px) !important; /* leave room for left padding */
    padding-left: 8px !important;
    box-sizing: border-box !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }

  /* Ensure the internal label contents align to the left and keep a small gap */
  .dataTables_length label, #example_length label, .dataTables_filter label, #example_filter label {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Make the select and search input sit comfortably and not stretch the whole width */
  .dataTables_length select, #example_length select, .dataTables_filter input[type="search"], #example_filter input[type="search"] {
    margin-left: 0 !important;
    max-width: 220px !important;
  }
}

/* Stronger global override for DataTables search alignment up to 768px
   Some pages/styles may force the label to wrap; this ensures the label text
   and search input sit on the same row and are vertically centered. */
@media only screen and (max-width: 768px) {
  /* Stack the length and filter wrappers vertically and give them matching left padding
     Keep the internal label content (text + input/select) inline using flex on the label. */
  .dataTables_wrapper .dataTables_length,
  .dataTables_length,
  #example_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_filter,
  #example_filter {
    display: block !important;
    width: 100% !important;
    padding-left: 12px !important; /* left inset for both controls */
    box-sizing: border-box !important;
    margin: 0 0 10px 0 !important; /* space below each control */
    text-align: left !important;
  }

  /* Stack the label text above the control: label becomes block and input/select sits below it */
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label,
  .dataTables_filter label,
  .dataTables_length label,
  #example_filter label,
  #example_length label {
    display: block !important;
    margin: 0 0 6px 0 !important; /* small gap after each label */
    padding: 0 !important;
    white-space: normal !important;
  }

  /* Place the input/select on its own line under the label text and inset slightly */
  .dataTables_wrapper .dataTables_filter input[type="search"],
  .dataTables_filter input[type="search"],
  #example_filter input[type="search"] {
    display: block !important;
    width: 100% !important;
    max-width: 220px !important;
    margin: 6px 0 0 0 !important; /* small gap above the control */
    box-sizing: border-box !important;
  }

  .dataTables_wrapper .dataTables_length select,
  .dataTables_length select,
  #example_length select {
    /* Keep the Show select compact: inline-block and not full width */
    display: inline-block !important;
    width: auto !important;
    max-width: 140px !important;
    margin: 6px 0 0 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep the 'Show x entries' select comfortable width and not stretched full width */
  .dataTables_wrapper .dataTables_length select,
  .dataTables_length select,
  #example_length select {
    max-width: 140px !important;
    margin-left: 0 !important;
  }

  /* Defensive: ensure inline styles won't force full-width wrapping */
  .dataTables_wrapper .dataTables_filter label[style],
  .dataTables_wrapper .dataTables_filter input[style],
  .dataTables_wrapper .dataTables_length label[style] {
    width: auto !important;
    max-width: 100% !important;
  }
}

  /* On small screens, make the ID column as small as is reasonable for numeric IDs */
  @media only screen and (max-width: 767px) {
    #example th:nth-child(1), #example td:nth-child(1) {
      width: 10px !important;
      max-width: 36px !important;
      min-width: 10px !important;
      padding-left: 6px !important;
      padding-right: 6px !important;
      text-align: left !important;
    }
  }

/* TABLET: 768px - 1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .container, .app-content, .page-wrapper { padding-left: 16px; padding-right: 16px; }
  body, p, label { font-size: 15px; }
  .navbar .menu { display: block; }
  .navbar .menu-toggle { display: none; }
}

/* Test specific: micșorare buton Adauga Administrator pentru verificare vizuală */
/* Selectăm butonul care deschide modalul #addAdministratorModal */
button[data-bs-target="#addAdministratorModal"] {
  width: 150px !important;
  height: 50px !important;
  /* păstrăm puțin padding intern pentru a nu fi lipit de chenar; mai mult spațiu în dreapta pentru text */
  padding: 0 20px 0 12px !important; /* top right bottom left */
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size:12px;
  justify-content: flex-start !important;
  overflow: hidden !important;
}

/* Add Echipa button - apply globally so it's consistent */
button[data-bs-target="#addEchipaModal"] {
  width: 130px !important;
  height: 65px !important;
  padding: 0 20px 0 12px !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size:12px;
  overflow: hidden !important;
  margin-left: 16px !important; /* gap from title */
}

button[data-bs-target="#addEchipaModal"] i.ti { margin-left: 0px !important; }

/* Add Manager button: set size globally, mobile overrides remove padding and set smaller font */
button[data-bs-target="#addManagerModal"] {
  width: 120px !important;
  height: 40px !important;
  padding: 10px 14px !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Mobile: remove padding and set smaller font */
@media only screen and (max-width: 767px) {
  button[data-bs-target="#addManagerModal"] {
    padding: 0.5 !important;
    font-size: 12px !important;
    justify-content: center !important;
  }
}

/* Strong override for ID column (handles DataTables injected classes/cols) */
table#example th.sorting_1, table#example td.sorting_1,
table#example th:nth-child(1), table#example td:nth-child(1) {
  width: 24px !important;
  max-width: 24px !important;
  min-width: 24px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* If DataTables used <col> width, override it too */
table#example col:nth-child(1) { width: 24px !important; }

/* Mobile: smaller font for Add Agent button text */
@media only screen and (max-width: 767px) {
  button[data-bs-target="#addAgentModal"] {
    font-size: 12px !important;
  }
}

/* Global mobile pagination arrows for DataTables
   - Use inline SVG backgrounds on pseudo-elements to guarantee visibility
   - Keep the original text hidden via text-indent so accessibility labels remain
   - Strong specificity and !important where necessary to override other styles */
@media only screen and (max-width: 768px) {
  .dataTables_wrapper .dataTables_paginate {
    display: flex !important;
    gap: 0.4rem !important;
    align-items: center !important;
    white-space: nowrap !important;
    color: #2b2b2b !important;
  }

  .dataTables_wrapper .dataTables_paginate a.paginate_button.previous,
  .dataTables_wrapper .dataTables_paginate a.paginate_button.next,
  .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
  .dataTables_wrapper .dataTables_paginate .paginate_button.next {
    position: relative !important;
    display: inline-block !important;
    min-width: 44px !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-indent: -9999px !important; /* hide visible text but keep in DOM */
    white-space: nowrap !important;
    overflow: visible !important;
    vertical-align: middle !important;
    text-align: center !important;
    border-radius: 4px !important;
  }

  /* Left arrow: use SVG background to ensure visibility across fonts/browsers */
  .dataTables_wrapper .dataTables_paginate a.paginate_button.previous::before,
  .dataTables_wrapper .dataTables_paginate .paginate_button.previous::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%232b2b2b' d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>") !important;
    pointer-events: none !important;
  }

  /* Right arrow: use SVG background */
  .dataTables_wrapper .dataTables_paginate a.paginate_button.next::after,
  .dataTables_wrapper .dataTables_paginate .paginate_button.next::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%232b2b2b' d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/></svg>") !important;
    pointer-events: none !important;
  }

  /* Hide inner spans if DataTables outputs them to avoid double content */
  .dataTables_wrapper .dataTables_paginate .paginate_button > span,
  .dataTables_wrapper .dataTables_paginate a.paginate_button > span {
    display: none !important;
  }

  /* Keep numeric buttons inline and tappable */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    white-space: nowrap !important;
    min-width: 36px !important;
    padding: 0 6px !important;
  }

  /* Dim icons for disabled buttons */
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled::before,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled::after,
  .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled::before,
  .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled::after {
    opacity: 0.45 !important;
  }
}

/* Make Bootstrap nav-tabs display horizontally on small screens (<=768px)
   so modal tabs like "Agenți în echipă" / "Adaugă agenți" appear side-by-side. */
@media only screen and (max-width: 768px) {
  /* Apply to any nav-tabs (scoped to small screens) */
  .nav.nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    align-items: stretch !important;
  }

  /* Make each tab take equal share when possible */
  .nav.nav-tabs .nav-item {
    flex: 1 1 0 !important;
    margin: 0 !important; /* remove default spacing that may force wrapping */
  }

  /* Center tab labels and avoid wrapping */
  .nav.nav-tabs .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    padding: 0.5rem 0.6rem !important;
    text-align: center !important;
    width: 100% !important; /* make the clickable area full width of the flex item */
  }

  /* If there are more than 2 tabs, allow horizontal scrolling rather than wrapping */
  .nav.nav-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* Ensure sidebar logo is visible on medium and small screens (<= 1200px)
   Some compiled/global styles hide .dark-logo/.light-logo depending on nav state.
   Force the images to display in the sidebar/menu on narrower viewports so the
   logo appears inside the menu for tablets and phones. */
@media screen and (max-width: 1200px) {
  /* Hide logo by default on narrow viewports to avoid covering the toggle/menu.
     Show it only when the sidebar has the 'sidebar-open' class (overlay open).
     Use .site-logo (added in blade) to target the single NewCredit image. */
  nav .app-logo img.site-logo {
    display: none !important;
    max-height: 56px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* When sidebar is opened (overlay), show the logo in the menu */
  nav.sidebar-open .app-logo img.site-logo {
    display: block !important;
  }

  /* Make sure the logo container has enough space when visible */
  nav.sidebar-open .app-logo {
    padding: 12px 12px 8px !important;
    display: block !important;
  }
}

/* If a second logo appears in the header area, hide it so only the
   sidebar logo remains. This prevents the duplicate on the right-hand
   side while keeping the sidebar logo visible and blended. */
.header-main .site-logo,
.header-main img.site-logo,
.app-content .header-main .site-logo {
  display: none !important;
}

  /* Ensure Save (primary) and Cancel (secondary) buttons are side-by-side on mobile
     and ordered: Cancel (left) | Save (right). Applies to .text-end blocks with buttons. */
  @media only screen and (max-width: 768px) {
    .text-end {
      display: flex !important;
      gap: 0.5rem !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 0 !important;
    }

    /* Make each button take roughly half the width and be tappable */
    .text-end .btn {
      flex: 1 1 0 !important;
      max-width: 49% !important;
      box-sizing: border-box !important;
      font-size: 12px !important; /* mobile font size */
    }

    /* If DOM order is Save then Cancel, swap visually so Cancel is left and Save is right */
    .text-end .btn-secondary { order: 1 !important; }
    .text-end .btn-primary { order: 2 !important; }

    /* Ensure anchor-styled buttons behave like buttons and fill available area */
    .text-end a.btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    /* Make Save (primary) slightly smaller so it fits better on one line */
    .text-end .btn-primary {
      height: 36px !important;
      line-height: 1 !important;
      padding: 6px 8px !important;
      font-size: 12px !important;
      max-width: 48% !important;
    }

    /* Keep Cancel a bit smaller too */
    .text-end .btn-secondary {
      height: 36px !important;
      line-height: 1 !important;
      padding: 6px 8px !important;
      font-size: 12px !important;
      max-width: 48% !important;
    }
  }