/* Images for Shopping - Frontend Styles */
/* Scoped to only affect this plugin to avoid conflicts with Feed Tool */

.images-shopping-wrapper .images-shopping-header {
  background: #ecebe4 !important;
  color: #0c6b35 !important;
  padding: 1rem 2rem;
  margin-bottom: 2rem;
}

.images-shopping-wrapper .images-shopping-header h5,
.images-shopping-wrapper .images-shopping-header h2 {
  margin-bottom: 0;
}

.images-shopping-wrapper .images-client-table {
    width: 100%;
    table-layout: fixed;
}
.images-shopping-wrapper .images-client-table th,
.images-shopping-wrapper .images-client-table td {
    width: auto;
}
.images-shopping-wrapper .images-client-table th:last-child,
.images-shopping-wrapper .images-client-table td:last-child {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    text-align: center;
}
.images-shopping-wrapper .images-client-table th:nth-child(2),
.images-shopping-wrapper .images-client-table td:nth-child(2) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}
.images-shopping-wrapper .images-client-table td:nth-child(2) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 40px;
}

/* Afstand mellem Images og Options kolonner */
.images-shopping-wrapper .images-client-table td:nth-child(2) {
    padding-right: 24px;
}

/* Ens bredde og højrejustering for Images-knap */
.images-shopping-wrapper .images-client-images-btn {
    min-width: 110px;
    text-align: right;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    gap: 0.3em;
    background: #39b1a2;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 18px;
    font-weight: 400;
    transition: background 0.2s;
}
.images-shopping-wrapper .images-client-images-btn:hover {
    background: #094842;
    color: #fff;
}
.images-count-mono {
    font-family: monospace;
    min-width: 2ch;
    text-align: right;
    display: inline-block;
}

/* Horisontal menu under sidetitel */
.images-shopping-wrapper .images-horizontal-menu-wrap {
    width: 100%;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e0e0e0;
    background: #ecebe4;
    padding: 0.5rem 0 0.5rem 0;
}
.images-shopping-wrapper .images-horizontal-menu {
    flex-direction: row !important;
    gap: 0;
}
.images-shopping-wrapper .images-horizontal-menu .nav-item {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center;
}
.images-shopping-wrapper .images-horizontal-menu .nav-link {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0;
}

/* Custom farve til horisontal menu */
.images-shopping-wrapper .images-menu-clients {
    color: #39b1a2;
    background: none;
    border: none;
}
.images-shopping-wrapper .images-menu-clients.active,
.images-shopping-wrapper .images-menu-clients:focus {
    color: #fff;
    background: #39b1a2;
    border: none;
}
.images-shopping-wrapper .images-menu-clients i {
    color: #39b1a2;
}
.images-shopping-wrapper .images-menu-clients.active i {
    color: #fff;
}

/* Custom knapper */
.images-shopping-wrapper .btn.btn-success.images-upload-btn,
.images-shopping-wrapper .btn.btn-success.images-view-all-clients-btn,
.images-shopping-wrapper .btn.btn-success.images-add-client-btn {
    background: #39b1a2;
    color: #fff;
    border: none;
    box-shadow: none;
    background-image: none;
}

.images-shopping-wrapper .btn.btn-success.images-upload-btn:hover,
.images-shopping-wrapper .btn.btn-success.images-view-all-clients-btn:hover,
.images-shopping-wrapper .btn.btn-success.images-add-client-btn:hover {
    background: #094842;
    color: #fff;
}

/* Centrer og sæt max bredde på plugin-indhold */
.images-shopping-wrapper .container-fluid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.images-shopping-wrapper .images-shopping-header,
.images-shopping-wrapper .images-horizontal-menu-wrap {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.images-shopping-wrapper .images-custom-dropdown {
  position: relative;
  display: inline-block;
}
.images-shopping-wrapper .images-custom-dropdown-toggle {
  background: #39b1a2;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
  font-weight: 400;
  transition: background 0.2s;
}
.images-shopping-wrapper .images-custom-dropdown-toggle:hover,
.images-shopping-wrapper .images-custom-dropdown-toggle:focus {
  background: #094842;
}
.images-shopping-wrapper .images-custom-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 110%;
  min-width: 140px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1000;
  padding: 0;
  margin: 0;
  list-style: none;
}
.images-shopping-wrapper .images-custom-dropdown-menu li a {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  font-size: 1em;
}
.images-shopping-wrapper .images-custom-dropdown-menu li a:hover {
  background: #f2f2f2;
  color: #094842;
}
.images-shopping-wrapper .images-custom-dropdown.open .images-custom-dropdown-menu {
  display: block;
}

/* Image table styles */
.images-table img {
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Progress bar */
.progress {
    height: 20px;
    margin-top: 10px;
}

/* Button styles for images view */
.images-shopping-wrapper .images-export-csv-btn {
    background: #39b1a2;
    color: #fff;
    border: none;
    box-shadow: none;
    background-image: none;
}

.images-shopping-wrapper .images-export-csv-btn:hover {
    background: #094842;
    color: #fff;
}

.images-shopping-wrapper .images-delete-all-btn,
.images-shopping-wrapper .images-delete-btn {
    background: #be658e;
    color: #fff;
    border: none;
    box-shadow: none;
    background-image: none;
    font-weight: 600;
}

.images-shopping-wrapper .images-delete-all-btn:hover,
.images-shopping-wrapper .images-delete-btn:hover {
    background: #8e2e5d;
    color: #fff;
}

.images-shopping-wrapper .images-delete-all-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Download link styling */
.images-shopping-wrapper .images-download-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s, color 0.2s;
}

.images-shopping-wrapper .images-download-link:hover {
    transform: scale(1.2);
    color: #094842 !important;
}

.images-shopping-wrapper .images-download-link i {
    transition: color 0.2s;
}

.images-shopping-wrapper .images-download-link:hover i {
    color: #094842 !important;
}

/* Table modal styling for easy copy-paste */
#imagesTableModal .table {
    font-family: monospace;
    font-size: 0.9rem;
}

#imagesTableModal .table td {
    user-select: all;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    cursor: text;
    white-space: nowrap;
}

#imagesTableModal .table td:hover {
    background-color: #f8f9fa;
}

#imagesTableModal .table th {
    background-color: #39b1a2;
    color: #fff;
    font-weight: 600;
    user-select: none;
}