/* ======================================================
   Playdate.Pics Custom Stylesheet
   File: playdate.css
   Purpose: Shell CSS file with organized sections
   ====================================================== */

   
/* ======================================================
   0. Unsorted
   ====================================================== */

  /* Main layout for custom page */
  .pd-container-main {
    padding-left:0;
    padding-right:0;
  }
  /* Tabs row now contains the right-aligned Return link too */
  .pd-nav-tabs{
    display:flex;
    align-items:flex-end;
    border-bottom:1px solid #eee;
    margin-bottom:0;           /* connects to content box */
  }
  .pd-nav-tabs .nav-item{ display:block; }
  .pd-flex-spacer{ flex:1 1 auto; }  /* pushes Return link to the right */

  /* Inactive tabs: no side/top border, transparent background, light bottom gap */
  .pd-nav-tabs .nav-link{
    border:none;
    background:transparent;
    margin-right:6px;          /* (1) a little space between tabs */
    padding:.5rem 1rem;
  }

  /* Active tab: white background, three-side border, bottom merges with content */
  .pd-nav-tabs .nav-link.active{
    background:#fff;
    border:1px solid #eee;     /* (2) consistent #eee everywhere */
    border-bottom-color:#fff;  /* fuse with content box */
    border-top-left-radius:10px;
    border-top-right-radius:10px;
  }

  /* Return link styled like a tab label but remains a plain link */
  .pd-return-link{
    display:block;                 /* yes — makes height/padding behave like tabs */
    padding:.5rem 1rem;            /* match tab padding */
    line-height:1.5;               /* match tab text line-height */
    margin-left:6px;
    background:transparent !important;
    border:none !important;
    border-radius:10px 10px 0 0;   /* optional: same top rounding */
    position:relative; top:-1px;   /* tiny nudge so baselines line up perfectly */
    }
    .pd-return-link:hover{ text-decoration:underline; }

  /* Content box directly under tabs */
  .pd-navtab-content{
    border:1px solid #eee;
    border-top:none;           /* connects to active tab */
    border-radius:0;           /* (1) square corners at top/bottom */
    padding:16px;
    background:#ffffff;
  }

  .pd-navtab-content .card {
    border-radius:12px;
    margin-bottom:12px;
  }

  .pd-navtab-content .card-header {
    color:#d9230f;
    font-weight: bold;
    font-size:1.25rem;
  }

  /* Tab body visibility */
  .pd-tab{ display:none; }
  .pd-tab.active{ display:block; }

  /* Greying disabled section */
  .pd-disabled{ opacity:.6; pointer-events:none; }
  .pd-hint{ color:#6b7280; font-size:13px; }

  /* Button hover/disabled */
  .pd-btn-primary{ transition:transform .06s ease; }
  .pd-btn-primary:hover{ transform:translateY(-1px); }
  .pd-btn-primary[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

  .btn-sm + .btn-sm { margin-left: .25em; }

  .pd-label-sm{ display:block; font-size:12px; color:#6b7280; }

  .pd-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
  .pd-col{ flex:1; min-width:260px; }

    /* Modal Overlay */
    .pd-modal[hidden] { display: none !important; }
    .pd-modal {
        position: fixed; inset: 0; z-index: 1050;
        display: grid; place-items: center;
    }
    .pd-modal__backdrop {
        position: absolute; inset: 0; background: rgba(0,0,0,0.45);
    }
    .pd-modal__dialog {
        position: relative;
        max-width: 720px; width: min(96vw, 720px);
        background: #fff; border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,.25);
        padding: 16px 16px 12px 16px;
    }
    .pd-modal__body { max-height: 70vh; overflow:auto; }
    .pd-modal__footer { margin-top: 12px; display:flex; justify-content:flex-end; gap:8px; }
    .pd-modal__close {
        position: absolute; top: 6px; right: 8px;
        border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer;
    }
    @media (prefers-reduced-motion:no-preference){
        .pd-modal__dialog { transform: translateY(8px); opacity:.98; transition: transform .18s ease, opacity .18s ease; }
        .pd-modal[hidden] .pd-modal__dialog { transform: translateY(0); opacity:0; }
    }


     /* Main layout for custom page */
  .pd-container-main {
    padding-left:0;
    padding-right:0;
  }
  /* Tabs row now contains the right-aligned Return link too */
  .pd-nav-tabs{
    display:flex;
    align-items:flex-end;
    border-bottom:1px solid #eee;
    margin-bottom:0;           /* connects to content box */
  }
  .pd-nav-tabs .nav-item{ display:block; }
  .pd-flex-spacer{ flex:1 1 auto; }  /* pushes Return link to the right */

  /* Inactive tabs: no side/top border, transparent background, light bottom gap */
  .pd-nav-tabs .nav-link{
    border:none;
    background:transparent;
    margin-right:6px;          /* (1) a little space between tabs */
    padding:.5rem 1rem;
  }

  /* Active tab: white background, three-side border, bottom merges with content */
  .pd-nav-tabs .nav-link.active{
    background:#fff;
    border:1px solid #eee;     /* (2) consistent #eee everywhere */
    border-bottom-color:#fff;  /* fuse with content box */
    border-top-left-radius:10px;
    border-top-right-radius:10px;
  }

  /* Return link styled like a tab label but remains a plain link */
  .pd-return-link{
    display:block;                 /* yes — makes height/padding behave like tabs */
    padding:.5rem 1rem;            /* match tab padding */
    line-height:1.5;               /* match tab text line-height */
    margin-left:6px;
    background:transparent !important;
    border:none !important;
    border-radius:10px 10px 0 0;   /* optional: same top rounding */
    position:relative; top:-1px;   /* tiny nudge so baselines line up perfectly */
    }
    .pd-return-link:hover{ text-decoration:underline; }

  /* Content box directly under tabs */
  .pd-navtab-content{
    border:1px solid #eee;
    border-top:none;           /* connects to active tab */
    border-radius:0;           /* (1) square corners at top/bottom */
    padding:16px;
    background:#ffffff;
  }

  .pd-navtab-content .card {
    border-radius:12px;
    margin-bottom:12px;
  }

  .pd-navtab-content .card-header {
    color:#d9230f;
    font-weight: bold;
    font-size:1.25rem;
  }

  /* Tab body visibility */
  .pd-tab{ display:none; }
  .pd-tab.active{ display:block; }

  /* Table Formatting */
  .pd-table-action-group {
    margin: .25em auto;
  }

  /* Greying disabled section */
  .pd-disabled{ opacity:.6; pointer-events:none; }
  .pd-hint{ color:#6b7280; font-size:13px; }

  /* Button hover/disabled */
  .pd-btn-primary{ transition:transform .06s ease; }
  .pd-btn-primary:hover{ transform:translateY(-1px); }
  .pd-btn-primary[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

  .pd-label-sm{ display:block; font-size:12px; color:#6b7280; }

  .pd-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
  .pd-col{ flex:1; min-width:260px; }

  .btn-sm + .btn-sm { margin-left: .25em; }

    /* Modal Overlay */
    .pd-modal[hidden] { display: none !important; }
    .pd-modal {
        position: fixed; inset: 0; z-index: 1050;
        display: grid; place-items: center;
    }
    .pd-modal__backdrop {
        position: absolute; inset: 0; background: rgba(0,0,0,0.45);
    }
    .pd-modal__dialog {
        position: relative;
        max-width: 720px; width: min(96vw, 720px);
        background: #fff; border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,.25);
        padding: 16px 16px 12px 16px;
    }
    .pd-modal__body { max-height: 70vh; overflow:auto; }
    .pd-modal__footer { margin-top: 12px; display:flex; justify-content:flex-end; gap:8px; }
    .pd-modal__close {
        position: absolute; top: 6px; right: 8px;
        border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer;
    }

/* =======================
   Album Manage Panel
   ======================= */

.pd-panel {
  background: #fff;
  padding: 12px;
}

.pd-sticky-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 6px 0 10px 0;
  border-bottom: 1px solid #eee;
}

.pd-help {
  color: #6c757d;
  font-size: 0.92em;
}

.pd-hr {
  border: 0;
  border-top: 1px solid #e5e5e5;
  margin: 12px 0;
}

.pd-checkwrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pd-checkwrap .pd-checktext {
  flex: 1 1 auto;
}
.pd-checkwrap .pd-checkcell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 2rem;
}

.pd-two {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0;
}
.pd-two .left,
.pd-two .right {
  flex: 1 1 320px;
  min-width: 280px;
}
.pd-two .right {
  border-left: 1px solid #e5e5e5;
  padding-left: 16px;
}
.pd-two .left ul,
.pd-two .right ul {
  margin: 0;
  padding-left: 18px;
}
.pd-two li {
  margin: 4px 0;
}

.pd-remove {
  color: #c0392b; /* site red */
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
}

.btn-sm + .btn-sm {
  margin-left: .25em;
}

.form-label {
  display: block;
  margin-bottom: .25rem;
}

/* Styled modal links (search, etc.) */
.pd-link {
  color: #c0392b !important;   /* brighter site red */
  text-decoration: none;
  cursor: pointer;
}
.pd-link:hover {
  color: #a93226 !important;   /* optional darker hover red */
}

/* =======================
   PD Modal + Manage Album fixes (scoped)
   ======================= */

/* Ensure the scrollable area is the modal body */
.pd-modal .pd-modal__body {
  max-height: 75vh;
  overflow: auto;
}

/* Panel + sticky header behave inside the modal scroll */
.pd-modal .pd-panel {
  background: #fff;
  padding: 12px;
  position: relative; /* anchor sticky header */
}
.pd-modal .pd-panel .pd-sticky-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 6px 0 10px 0;
  border-bottom: 1px solid #eee;
}

/* Checkbox rows: align text left, control right; never fixed-position */
.pd-modal .pd-panel .pd-checkwrap {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}
.pd-modal .pd-panel .pd-checkwrap .pd-checktext {
  flex: 1 1 auto;
}
.pd-modal .pd-panel .pd-checkwrap .pd-checkcell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 2rem;
}
.pd-modal .pd-panel .pd-checkwrap .pd-checkcell .form-check-input {
  position: static !important; /* guard against any global 'fixed' overrides */
}

/* Two-column layout for Groups (left) and Users (right) */
.pd-modal .pd-panel .pd-two {
  display: flex !important;
  flex-wrap: nowrap;      /* keep side-by-side on desktop */
  gap: 16px;
  margin: 12px 0;
}
@media (max-width: 768px) {
  .pd-modal .pd-panel .pd-two {
    flex-wrap: wrap;      /* stack on mobile */
  }
}
.pd-modal .pd-panel .pd-two .left,
.pd-modal .pd-panel .pd-two .right {
  width: 50%;
  min-width: 0;           /* allow selects to shrink properly */
}
.pd-modal .pd-panel .pd-two .right {
  border-left: 1px solid #e5e5e5;
  padding-left: 16px;     /* visual breathing room next to border */
}

/* Lists & labels */
.pd-modal .pd-panel .pd-two .left ul,
.pd-modal .pd-panel .pd-two .right ul {
  margin: 0;
  padding-left: 18px;
}
.pd-modal .pd-panel .pd-two li {
  margin: 4px 0;
}
.pd-modal .pd-panel .form-label {
  display: block;
  margin-bottom: .25rem;
}

/* Selects fill their column width */
.pd-modal .pd-panel .pd-two select.form-select {
  width: 100%;
}

/* Visual dividers & helpers */
.pd-modal .pd-panel .pd-hr {
  border: 0;
  border-top: 1px solid #e5e5e5;
  margin: 12px 0;
}

/* Remove action and modal-link styling */
.pd-modal .pd-panel .pd-remove {
  color: #c0392b;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  cursor: pointer;
}

.pd-modal .pd-panel .pd-link {
  color: #c0392b !important;   /* brighter site red */
  text-decoration: none;
  cursor: pointer;
}
.pd-modal .pd-panel .pd-link:hover {
  color: #a93226 !important;   /* optional darker hover */
}

/* Small spacing between adjacent small buttons */
.pd-modal .pd-panel .btn-sm + .btn-sm {
  margin-left: .25em;
}

/* Sub-Headings */
.pd-modal .pd-panel h6, .pd-modal .pd-panel .form-label {
    font-weight: bold;
}


    @media (prefers-reduced-motion:no-preference){
        .pd-modal__dialog { transform: translateY(8px); opacity:.98; transition: transform .18s ease, opacity .18s ease; }
        .pd-modal[hidden] .pd-modal__dialog { transform: translateY(0); opacity:0; }
    }

/* match your existing look */
.pd-upload-dropzone {
  border: 2px dashed #ccc;
  border-radius: 12px;
  padding: 2.5rem 1rem;
  user-select: none;
}

.pd-upload-drop-hint { font-weight: 600; }
.pd-upload-drop-subhint { font-size: .9rem; color: #666; }

/* Forms */
.pd-form-check {
    position: relative;
    display: block;
    text-align: right;
}

.pd-form-check-label {
    margin: 0;
    padding-right: .5rem;
}

.pd-form-check input[type="checkbox"] {
    position: absolute;
    margin-top: .3rem;
}


/* ======================================================
   1. Global Resets / Base
   ====================================================== */
/* Example: html, body, headings, links */


/* ======================================================
   2. Layout
   ====================================================== */
/* Wrapper, header, nav, footer, main-content */

/* ------------------------------------------- Dashboard */
.pd-dashboard { 
   display: grid; 
   grid-template-columns: 4fr 1fr; 
   gap: 1.5rem; 
   margin-top: 2rem; 
}
.pd-card { border-radius: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,0.1); background: #fff; padding: 1rem; }
.pd-card h5 { margin-bottom: 1rem; font-weight: 600; }
.pd-action-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #ddd; border-radius: 1rem; padding: 1.5rem; cursor: pointer; transition: background 0.2s; margin-bottom: 1rem; }
.pd-action-tile:hover { background: #fff0ef; }
.pd-action-tile i { font-size: 2rem; margin-bottom: 0.5rem; color: #d9230f; }
.pd-album { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.pd-album img { width: 64px; height: 64px; object-fit: cover; border-radius: 0.5rem; }


/* ------------------------------------------- pd-two */
.pd-two {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0;
}
.pd-two .left,
.pd-two .right {
  flex: 1 1 320px;
  min-width: 280px;
}
.pd-two .right {
  border-left: 1px solid #e5e5e5;
  padding-left: 16px;
}
.pd-two .left ul,
.pd-two .right ul {
  margin: 0;
  padding-left: 18px;
}
.pd-two li {
  margin: 4px 0;
}

/* ------------------------------------------- Buttons */
.card-body .btn-sm + .btn-sm { margin-left: .25em; }


/* ------------------------------------------- Album Display */

/* Album header block */
.pd-album-header {
  background: #f5f7fb;
  border-radius: 0.75rem;
  border: 1px solid #e2e6f0;
}

.pd-album-title {
  font-weight: 600;
}

.pd-album-description {
  line-height: 1.4;
}

.pd-album-owner {
  color: #6c757d;
}

/* Members list box */
.pd-members-box {
  background: #eef3ff;
  border-left: 4px solid #bcd3ff;
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
}

.pd-member-pill {
  background: #dbe6ff;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.85rem;
  color: #344767;
  border: 1px solid #c5d5ff;
}

/* Categories wrapper (optional tuning) */
.pd-categories {
  /* You can add spacing/styling here if needed */
}

/* Responsive thumbnail grid */
.pd-grid {
  display: grid;
  grid-template-columns: 1fr;          /* 1 column on very small screens */
  gap: 0.75rem;
}

/* 2 columns on small screens (≥576px) */
@media (min-width: 576px) {
  .pd-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 columns on medium screens (≥768px) */
@media (min-width: 768px) {
  .pd-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4 columns on large screens (≥1200px) */
@media (min-width: 1200px) {
  .pd-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*
 * Thumbnail images
 * This is generic: adjust selectors if your theme uses specific classes.
 */
.pd-grid img {
  /* width: 100%; */ /* commenting out because site is displaying "new" icons that stretch full size */
  height: auto;
  border-radius: 0.75rem;
  display: block;
}


/* ======================================================
   3. Typography
   ====================================================== */
/* Font families, headings, paragraphs, lists */


/* ===== Breadcrumb separators for Piwigo / Bootstrap Darkroom ===== */

/* Between successive links in the breadcrumb, add " / " */
.nav-breadcrumb a + a::before {
  content: " / ";
  padding: 0 0.25rem;
}

/* Optional: if the separator is plain text nodes, ensure spacing */
.nav-breadcrumb {
  white-space: normal;
}

/* Optional: shrink long paths a bit and keep them on one line on desktop */
.nav-breadcrumb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* Let breadcrumbs wrap on small screens */
  .nav-breadcrumb {
    white-space: normal;
  }
}


/* ======================================================
   4. Navigation
   ====================================================== */
/* Navbar, dropdowns, sidebar */

.dropdown-item:focus, .dropdown-item:hover {
    color: #d9230f;
    text-decoration: none;
}


/* ======================================================
   5. Forms
   ====================================================== */
/* Input fields, textareas, checkboxes, radios, buttons */



/* ======================================================
   6. Tables
   ====================================================== */
/* Table base, striped, hover, responsive */


/* ======================================================
   7. Cards / Panels
   ====================================================== */
/* Card containers, headers, footers */


/* Tip Card */
.pd-card-tip {
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0;
    padding: 16px;
    background: #ffffff;
}

.pd-card-tip-head { /* not used */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fff3f3;
  border-radius: 10px 10px 0 0;
}

.pd-card-tip-title {
  font-weight: 600;
  font-size: 15px;
}

.pd-card-tip-body {
    padding: 0 12px;
    font-size: 14px;
    color: var(--pd-tip-text);
    border-left: 5px solid #c62828;
    margin: 12px;
}


.pd-card-tip .pd-tip-hide.btn {
  padding: 2px 8px;
  font-size: 13px;
  color: #d9230f;
  text-decoration: none;
}
.pd-card-tip .pd-tip-hide.btn:hover {
  text-decoration: underline;
  color: #c62828;
}

/* "?" Help icon — sits in the page title bar on the right */
.pd-tip-helpbox{
   position: relative;
   height: 0px;
   overflow: visible;
}

.pd-tip-help {
    position: absolute;
    right: 14px;
    top: -40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 50%;
    font-weight: 700;
    font-size: 18px;
    color: #c62828;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
}

.titlePage .pd-tip-help:hover {
  background: #fff3f3;
}

.d-none { display: none !important; }

.pd-two-heading {
   text-align: center;
   font-weight: 600;
}

/* ======================================================
   8. Modals / Overlays
   ====================================================== */
/* Custom modal windows, backdrops */


/* ======================================================
   9. Alerts / Notifications
   ====================================================== */
/* Success, error, warning messages */


/* ======================================================
   10. Dashboard Components
   ====================================================== */
/* Tiles, action buttons, user widgets */


/* ======================================================
   11. Media / Images
   ====================================================== */
/* Thumbnails, galleries, responsive images */


/* ======================================================
   12. Animations / Transitions
   ====================================================== */
/* Hover effects, fades, custom transitions */


/* ======================================================
   13. Utilities / Helpers
   ====================================================== */
/* Spacing, alignment, text helpers */


/* ======================================================
   14. Responsive (Media Queries)
   ====================================================== */
/* Breakpoints for mobile, tablet, desktop */

@media (max-width: 767px) {
  /* Mobile rules here */
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Tablet rules here */
}

@media (min-width: 992px) {
  /* Desktop rules here */
}