/* ═══════════════════════════════════════════════════════════════════════
   OW Kundportal v2 — workshop page (clients/project/{id})
   Views: views/my_project.php, template_parts/projects/my_project_tabs.php,
          template_parts/projects/my_project_overview.php
   Overrides the legacy .cp-* rules from client-dashboard.css where reused.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Head ────────────────────────────────────────────────────────────── */
body.customers .cp-head { margin-bottom: 24px; }
body.customers .cp-head-main { min-width: 0; }
body.customers .cp-headmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
body.customers .cp-headmeta-sep { color: var(--pt-muted); }

/* ── Tabs (plain nav, no ARIA tab roles) ─────────────────────────────── */
body.customers .cp-tabs {
    border-bottom: 1px solid var(--pt-border); margin-bottom: 20px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.customers .cp-tabs::-webkit-scrollbar { display: none; }
body.customers .cp-tab-list { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
body.customers .cp-tab-list > li { margin: 0; float: none; }
body.customers .cp-tab-list > li > a {
    display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px;
    color: var(--pt-text-2); font-size: 14px; font-weight: 500; white-space: nowrap;
    text-decoration: none; position: relative; border: 0; border-radius: 0; background: transparent;
}
body.customers .cp-tab-list > li > a:hover { color: var(--pt-text); background: transparent; }
body.customers .cp-tab-list > li.active > a,
body.customers .cp-tab-list > li > a[aria-current="page"] { color: var(--pt-accent-text); font-weight: 600; }
body.customers .cp-tab-list > li.active > a::after,
body.customers .cp-tab-list > li > a[aria-current="page"]::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
    background: var(--pt-accent); border-radius: 2px 2px 0 0;
}
body.customers .cp-tab-list > li > a:focus-visible { outline-offset: -4px; border-radius: var(--pt-radius-sm); }
body.customers .cp-tab-list > li > a .menu-icon { color: inherit; opacity: .7; }
body.customers .cp-tab-list > li.active .pt-chip-count,
body.customers .cp-tab-list > li > a[aria-current="page"] .pt-chip-count { background: var(--pt-accent-soft); color: var(--pt-accent-text); }

/* Tab panel: overview renders its own cards; every other group sits in one card */
body.customers .cp-tab-panel { margin: 0; }
body.customers .cp-tab-card { padding: 18px 20px; }

/* ── Schema & detaljer ───────────────────────────────────────────────── */
body.customers .cp-schedule { margin-bottom: 20px; }
body.customers .cp-schedule .pt-card-body { padding: 20px 24px; }
body.customers .cp-schedule-empty { margin: 0; }
body.customers .cp-schedule .pt-prose { font-size: 15px; line-height: 1.6; color: var(--pt-text); overflow-wrap: anywhere; }
body.customers .cp-schedule .pt-prose p,
body.customers .cp-schedule .pt-prose dl,
body.customers .cp-schedule .pt-prose ul,
body.customers .cp-schedule .pt-prose ol { margin: 0 0 12px; }
body.customers .cp-schedule .pt-prose > :last-child { margin-bottom: 0; }
body.customers .cp-schedule .pt-prose dt { font-weight: 400; line-height: inherit; }
body.customers .cp-schedule .pt-prose dd { margin: 0 0 6px; }
body.customers .cp-schedule .pt-prose strong, body.customers .cp-schedule .pt-prose b { font-weight: 600; color: var(--pt-text); }
body.customers .cp-schedule .pt-prose h1, body.customers .cp-schedule .pt-prose h2, body.customers .cp-schedule .pt-prose h3,
body.customers .cp-schedule .pt-prose h4, body.customers .cp-schedule .pt-prose h5 { font-size: 16px; font-weight: 600; margin: 16px 0 6px; color: var(--pt-text); }
body.customers .cp-schedule .pt-prose img { max-width: 100%; height: auto; border-radius: var(--pt-radius-sm); }
body.customers .cp-schedule .pt-prose table { max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 12px; }
body.customers .cp-schedule .pt-prose td, body.customers .cp-schedule .pt-prose th { padding: 6px 10px; border: 1px solid var(--pt-border); vertical-align: top; }
body.customers .cp-kv-body { border-top: 1px solid var(--pt-border); background: var(--pt-surface-2); border-radius: 0 0 var(--pt-radius) var(--pt-radius); }
body.customers dl.pt-kv { margin: 0; }
body.customers .pt-kv dd { margin: 0; }
body.customers .pt-kv dt { line-height: 1.3; }
body.customers .cp-finance { margin-bottom: 20px; }

/* ── Bilder & film (ownCloud) ────────────────────────────────────────── */
body.customers .cp-gallery { margin: 0 0 28px; padding: 0; border: 0; scroll-margin-top: calc(var(--pt-header-h) + 12px); }
body.customers .cp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
body.customers .cp-gallery-item {
    display: block; position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0; padding: 0;
    border: 0; border-radius: var(--pt-radius-sm); background: var(--pt-surface-3); overflow: hidden; cursor: pointer;
    transition: none; box-shadow: none; transform: none; scroll-snap-align: none;
}
body.customers .cp-gallery-item:hover { transform: none; box-shadow: none; border-color: transparent; }
body.customers .cp-gallery-item img,
body.customers .cp-gallery-item video { display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover; pointer-events: none; }
body.customers .cp-gallery-play {
    position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
body.customers .cp-gallery-play i { margin-left: 2px; }
body.customers .cp-audio-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
body.customers .cp-audio-list > li {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 8px 12px;
    background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm);
}
body.customers .cp-audio-name { flex: 1 1 200px; min-width: 0; font-weight: 500; color: var(--pt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.customers .cp-audio-list audio { flex: 1 1 260px; max-width: 100%; height: 36px; }

/* [hidden] must beat the display:grid/flex rules above (and client-dashboard's .cd-lb-prev/next) */
body.customers .cp-gallery[hidden], body.customers .cp-gallery-grid[hidden], body.customers .cp-audio-list[hidden],
body.customers .cd-lightbox [hidden] { display: none !important; }

/* Lightbox (markup built in my_project.php; base styles in client-dashboard.css) */
body.customers .cd-lb-content video { max-width: 90vw; max-height: 80vh; }
body.customers .cd-lb-close, body.customers .cd-lb-prev, body.customers .cd-lb-next { font-family: inherit; }
body.customers .cd-lb-close:focus-visible, body.customers .cd-lb-prev:focus-visible, body.customers .cd-lb-next:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    body.customers .cp-head { margin-bottom: 18px; }
    body.customers .cp-tab-list > li > a { padding: 0 10px; }
    body.customers .cp-tab-card { padding: 16px; }
    body.customers .cp-schedule .pt-card-body { padding: 16px; }
    body.customers .cp-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
}