/**
 * ============================================================================
 * Portal Cloud 9 - Products Styles
 * ============================================================================
 * 
 * Version: 8.3.6
 * Author: Brian Agoi (Gradyzer)
 * Company: Gradyzer
 * License: GPL-2.0+
 * ============================================================================
 */

/**
 * ============================================================================
 * Portal Cloud 9 - Product Management Styles
 * ============================================================================
 * Version: 8.3.5
 * Author: Brian Agoi (Gradyzer)
 * Company: Gradyzer
 * ============================================================================
 */

/* ── CSS custom properties ───────────────────────────────────────── */
:root {
    --p9-accent:var(--p9-grad-start, #1E90FF);
    --p9-accent-end:#000000;
    --p9-success:#059669;
    --p9-danger:#ef4444;
    --p9-bg-light:#f8fafc;
    --p9-panel-light:#ffffff;
    --p9-border-light:#e2e8f0;
    --p9-text-light:#334155;
    --p9-muted-light:#64748b;
    --p9-bg-dark:#4a4a4a;
    --p9-panel-dark:rgba(60,60,60,.92);
    --p9-border-dark: transparent;
    --p9-text-dark:#ffffff;
    --p9-muted-dark:#cbd5e1;
    --p9-meta-border-light:linear-gradient(135deg,var(--p9-accent) 0%,#ffffff 100%);
    --p9-meta-border-dark:linear-gradient(135deg,var(--p9-accent) 0%,#000000 100%);
    --p9-radius:12px;
    --p9-shadow:0 8px 32px rgba(0,0,0,.15)}

body {
    --p9-bg:var(--p9-bg-light);
    --p9-panel:var(--p9-panel-light);
    --p9-border:var(--p9-border-light);
    --p9-text:var(--p9-text-light);
    --p9-muted:var(--p9-muted-light)}

/* ── Dark mode variable overrides ───────────────────────────────── */
body.portalcloud9-dark {
    --p9-bg:var(--p9-bg-dark);
    --p9-panel:var(--p9-panel-dark);
    --p9-border:var(--p9-border-dark);
    --p9-text:var(--p9-text-dark);
    --p9-muted:var(--p9-muted-dark)}

/* ── Toolbar: search, filter, add product, view toggle ───────────── */
.p9-products-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    background:var(--p9-panel);
    border:1px solid var(--p9-border);
    border-radius:var(--p9-radius);
    padding:8px 12px;
    margin-bottom:16px;
    flex-wrap:wrap}

.p9-toolbar-left {
    display:flex;
    align-items:center;
    gap:6px;
    flex:1 1 auto}

.p9-toolbar-right {
    display:flex;
    align-items:center;
    gap:6px}

.p9-toolbar-left input[type="search"],.p9-toolbar-left select {
    width:220px;
    font-size:13px;
    border-radius:999px;
    padding:6px 12px;
    border:1px solid var(--p9-border)}

.p9-toolbar-left select {
    width:140px}

/* ── Add product primary button ─────────────────────────────────── */
.p9-btn-primary {
    background:linear-gradient(135deg,var(--p9-accent) 0%,var(--p9-accent-end) 100%);
    color:#fff;
    border:none;
    padding:6px 10px;
    border-radius:999px;
    font-size:13px;
    cursor:pointer;
    font-weight:600}

/* [grid-only — removed in free version] */

/* ── Select-all bar above product list ──────────────────────────── */
.p9-select-all-bar {
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px}

.p9-select-all-wrapper {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:500;
    color:var(--p9-text);
    cursor:pointer;
    user-select:none}

.p9-select-all-wrapper input {
    width:18px;
    height:18px;
    appearance:none;
    border:2px solid var(--p9-border);
    border-radius:4px;
    background:var(--p9-bg);
    position:relative}

.p9-select-all-wrapper input:checked {
    background:linear-gradient(135deg,var(--p9-accent) 0%,var(--p9-accent-end) 100%);
    border-color:var(--p9-accent)}

.p9-select-all-wrapper input:checked::after {
    content:'✓';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-weight:700;
    font-size:11px}

/* ── Bulk actions panel ─────────────────────────────────────────── */
.p9-bulk-actions {
    opacity:0;
    height:0;
    overflow:hidden;
    transition:opacity .25s,height .25s}

.p9-bulk-actions.active {
    opacity:1;
    height:auto}

.p9-bulk-actions button {
    border:1px solid var(--p9-grad-start, #1E90FF);
    background:linear-gradient(135deg, var(--p9-grad-start, #1E90FF) 0%, #000000 100%);
    color:#fff !important;
    padding:5px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:opacity .2s, transform .15s, box-shadow .15s;
    box-shadow: 0 2px 8px var(--p9-ring-20, rgba(30,144,255,.2));}

.p9-bulk-actions button:hover {
    opacity:.88;
    transform:translateY(-1px);
    box-shadow: 0 4px 12px var(--p9-ring-30, rgba(30,144,255,.3));
    color:#fff !important;}

.p9-bulk-actions button.danger {
    border-color:var(--p9-danger);
    color:var(--p9-danger)}

.p9-bulk-actions button.danger:hover {
    background:var(--p9-danger);
    color:#fff}

/* ── Products container (switches between grid and list) ─────────── */
.p9-products-container {
    display:grid;
    gap:20px;
    transition: opacity 0.18s ease}

/* [grid-only — removed in free version] */

.p9-products-container.list {
    display:flex;
    flex-direction:column;
    gap:16px}

/* ── Individual product card ────────────────────────────────────── */
.p9-product-card {
    background:var(--p9-panel);
    border:1px solid var(--p9-border);
    border-radius:var(--p9-radius);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    color:var(--p9-text);
    transition:transform .2s,box-shadow .2s;
    position:relative}

.p9-product-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 25px rgba(0,0,0,.1)}

/* ── Per-card selection checkbox ────────────────────────────────── */
.p9-product-checkbox-wrapper {
    position:absolute;
    top:12px;
    left:12px;
    z-index:10}

/* [grid-only — removed in free version] */

.p9-products-container.list .p9-product-checkbox-wrapper {
    position:static;
    margin-right:8px;
    align-self:center}

.p9-product-checkbox {
    appearance:none;
    width:20px;
    height:20px;
    border:2px solid var(--p9-border);
    border-radius:4px;
    background:var(--p9-bg);
    cursor:pointer;
    position:relative;
    transition:all .2s;
    flex-shrink:0}

.p9-product-checkbox:checked {
    background:linear-gradient(135deg,var(--p9-accent) 0%,var(--p9-accent-end) 100%);
    border-color:var(--p9-accent)}

.p9-product-checkbox:checked::after {
    content:'✓';
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    font-weight:700;
    font-size:12px}

/* ── Product image and status pill ──────────────────────────────── */
.p9-product-image {
    width:100%;
    height:200px;
    overflow:hidden;
    border-radius:8px;
    position:relative}

.p9-product-image img {
    width:100%;
    height:100%;
    object-fit:cover}

.p9-product-status-pill {
    position:absolute;
    top:8px;
    right:8px;
    padding:5px 10px;
    border-radius:999px;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    color:#fff;
    border:none;
    z-index:5}

.p9-product-status-pill.publish {
    background:linear-gradient(135deg,var(--p9-accent) 0%,var(--p9-accent-end) 100%)}

.p9-product-status-pill.draft {
    background:linear-gradient(135deg,#64748b 0%,#334155 100%)}

/* ── Product title, pricing and meta ────────────────────────────── */
.p9-product-info {
    display:flex;
    flex-direction:column;
    gap:8px}

.p9-product-title {
    font-size:18px;
    font-weight:700;
    margin:0;
    color:var(--p9-text)}

.p9-product-pricing {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px}

.p9-product-price {
    font-size:20px;
    font-weight:700;
    color:var(--p9-accent)}

.p9-product-price-old {
    font-size:14px;
    color:var(--p9-muted);
    text-decoration:line-through}

.p9-product-meta {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:10px;
    font-weight:500;
    background:var(--p9-panel);
    border-radius:9999px;
    padding:4px 10px;
    width:100%;
    border:2px solid transparent;
    background-image:linear-gradient(var(--p9-panel),var(--p9-panel)),var(--p9-meta-border-light);
    background-origin:border-box;
    background-clip:padding-box,border-box}

body.portalcloud9-dark .p9-product-meta {
    background-image:linear-gradient(var(--p9-panel),var(--p9-panel)),var(--p9-meta-border-dark);
    background-origin:border-box;
    background-clip:padding-box,border-box}

.p9-product-meta span+span::before {
    content:'|';
    color:var(--p9-accent);
    margin:0 4px}

/* ── Card action buttons: edit, duplicate, delete ────────────────── */
.p9-product-actions {
    display:flex;
    gap:8px;
    margin-top:auto}

.p9-btn-action {
    flex:1;
    text-align:center;
    padding:8px 12px;
    border:none;
    border-radius:999px;
    font-weight:600;
    font-size:12px;
    cursor:pointer;
    transition:all 0.2s ease;
    text-decoration:none;
    color:#fff}

.p9-btn-edit {
    background:linear-gradient(135deg,var(--p9-accent) 0%,var(--p9-accent-end) 100%)}

.p9-btn-edit:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(30,144,255,0.4)}

.p9-btn-delete {
    background:linear-gradient(135deg,#800000 0%,#ef4444 100%)}

.p9-btn-delete:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(128,0,0,0.4)}

/* ── List view overrides ─────────────────────────────────────────── */
.p9-products-container.list .p9-product-card {
    flex-direction:row;
    align-items:center;
    gap:16px;
    padding:12px}

.p9-products-container.list .p9-product-image {
    width:80px;
    height:80px;
    min-width:80px;
    position:relative}

/* [grid-only — removed in free version] */

/* In LIST mode: hide image overlay pill */
.p9-products-container.list .p9-product-image .p9-product-status-pill {
    display: none}

/* ── Left accent border on list cards keyed to status ───────────── */
.p9-products-container.list .p9-product-card.p9-list-card-publish {
    border-left: 3px solid var(--p9-accent, #1e90ff)}

.p9-products-container.list .p9-product-card.p9-list-card-draft {
    border-left: 3px solid #94a3b8}

/* ── Status pill in list view ────────────────────────────────────── */
.p9-list-status-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 2px 7px 2px 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    width: fit-content;
    margin-bottom: 4px}

.p9-list-status-pill.publish {
    background: rgba(30,144,255,0.10);
    color: var(--p9-accent, #1e90ff);
    border: 1px solid rgba(30,144,255,0.28)}

.p9-list-status-pill.draft {
    background: rgba(100,116,139,0.10);
    color: #64748b;
    border: 1px solid rgba(100,116,139,0.28)}

/* ── Indicator dot ───────────────────────────────────────────────── */
.p9-list-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0}

.p9-list-status-pill.publish .p9-list-status-dot {
    background: var(--p9-accent, #1e90ff);
    box-shadow: 0 0 0 0 rgba(30,144,255,0.5);
    animation: p9-pulse-dot 2s infinite}

.p9-list-status-pill.draft .p9-list-status-dot {
    background: #94a3b8}

@keyframes p9-pulse-dot {
    0%   { box-shadow: 0 0 0 0   rgba(30,144,255,0.5) }
    70%  { box-shadow: 0 0 0 5px rgba(30,144,255,0)   }
    100% { box-shadow: 0 0 0 0   rgba(30,144,255,0)   }
}

/* dark mode */
body.portalcloud9-dark .p9-list-status-pill.publish {
    background: rgba(30,144,255,0.15);
    border-color: rgba(30,144,255,0.38)}

body.portalcloud9-dark .p9-list-status-pill.draft {
    background: rgba(100,116,139,0.15);
    border-color: rgba(100,116,139,0.35);
    color: #94a3b8}

body.portalcloud9-dark .p9-products-container.list .p9-product-card.p9-list-card-draft {
    border-left-color: #475569}

.p9-products-container.list .p9-product-info {
    flex:1;
    gap:6px}

.p9-products-container.list .p9-product-title {
    font-size:16px}

.p9-products-container.list .p9-product-pricing {
    display:flex;
    align-items:center;
    gap:8px;
    position:relative}

.p9-products-container.list .p9-product-status-badge {
    display:inline-flex;
    align-items:center;
    padding:3px 8px;
    border-radius:999px;
    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
    color:#fff;
    border:none;
    margin-left:6px}

.p9-products-container.list .p9-product-status-badge.publish {
    background:linear-gradient(135deg,var(--p9-accent) 0%,var(--p9-accent-end) 100%)}

.p9-products-container.list .p9-product-status-badge.draft {
    background:linear-gradient(135deg,#64748b 0%,#334155 100%)}

.p9-products-container.list .p9-product-price {
    font-size:16px}

.p9-products-container.list .p9-product-price-old {
    font-size:13px}

.p9-products-container.list .p9-product-meta {
    flex:0 0 auto;
    width:auto;
    min-width:220px;
    flex-wrap:wrap}

.p9-products-container.list .p9-product-actions {
    flex-direction:row;
    margin:0;
    gap:6px}

.p9-products-container.list .p9-btn-action {
    padding:6px 12px;
    font-size:11px;
    flex:0 0 auto}

/* ── Pagination and page info ───────────────────────────────────── */
.p9-pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:24px}

.p9-info {
    font-size:14px;
    color:var(--p9-muted)}

.p9-pages {
    display:flex;
    gap:6px}

.p9-page {
    background:var(--p9-panel);
    border:1px solid var(--p9-border);
    color:var(--p9-text);
    padding:6px 10px;
    border-radius:6px;
    cursor:pointer;
    transition:all .2s}

.p9-page:hover {
    background:var(--p9-bg)}

.p9-page.active {
    background:linear-gradient(135deg,var(--p9-accent) 0%,var(--p9-accent-end) 100%);
    color:#fff;
    border-color:var(--p9-accent)}

.p9-loading {
    text-align:center;
    padding:40px;
    color:var(--p9-muted)}

@media (max-width:768px) {
    html,body {
    overflow-x:hidden;
    width:100%;
    position:relative}

.p9-products-wrap {
    overflow-x:hidden;
    width:100%;
    max-width:100vw;
    box-sizing:border-box}

.p9-products-wrap * {
    box-sizing:border-box;
    max-width:100%}

.p9-products-toolbar,.p9-select-all-bar {
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:100%;
    box-sizing:border-box}

.p9-toolbar-left,.p9-toolbar-right {
    width:100%;
    max-width:100%;
    flex-wrap:wrap;
    box-sizing:border-box}

.p9-toolbar-left {
    justify-content:flex-start}

.p9-toolbar-right {
    justify-content:space-between;
    margin-top:8px}

.p9-toolbar-left input[type="search"] {
    width:100%;
    max-width:100%;
    font-size:16px;
    padding:10px 14px;
    box-sizing:border-box}

.p9-toolbar-left select {
    width:48%;
    max-width:48%;
    font-size:16px;
    padding:10px 12px;
    box-sizing:border-box}

.p9-view-btn {
    font-size:12px;
    padding:8px 12px;
    white-space:nowrap;
    flex-shrink:0}

.p9-view-btn svg {
    width:14px;
    height:14px}

.p9-products-container {
    width:100%;
    max-width:100%;
    overflow-x:hidden}

.p9-products-container.grid {
    grid-template-columns:1fr;
    gap:16px;
    width:100%;
    max-width:100%}

.p9-products-container.list {
    gap:12px;
    width:100%;
    max-width:100%}

.p9-product-card {
    max-width:100%;
    width:100%;
    overflow:hidden;
    word-wrap:break-word;
    box-sizing:border-box}

.p9-product-title {
    font-size:16px;
    line-height:1.3;
    word-break:break-word;
    overflow-wrap:break-word;
    hyphens:auto;
    max-width:100%}

.p9-product-image {
    height:180px;
    width:100%;
    max-width:100%}

.p9-product-meta {
    flex-wrap:wrap;
    font-size:11px;
    padding:6px 10px;
    gap:4px;
    max-width:100%;
    width:100%}

.p9-product-meta span {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis}

.p9-product-info {
    max-width:100%;
    overflow:hidden}

.p9-product-pricing {
    flex-wrap:wrap;
    max-width:100%}

.p9-product-actions {
    max-width:100%;
    width:100%}

.p9-products-container.list .p9-product-card {
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:12px;
    max-width:100%;
    width:100%}

.p9-products-container.list .p9-product-checkbox-wrapper {
    position:absolute;
    top:12px;
    left:12px}

.p9-products-container.list .p9-product-image {
    width:100%;
    max-width:100%;
    height:200px;
    min-width:auto}

.p9-products-container.list .p9-product-info {
    width:100%;
    max-width:100%;
    order:2}

.p9-products-container.list .p9-product-meta {
    width:100%;
    max-width:100%;
    order:3;
    min-width:auto}

.p9-products-container.list .p9-product-actions {
    width:100%;
    max-width:100%;
    order:4;
    flex-direction:row;
    gap:8px}

.p9-products-container.list .p9-btn-action {
    flex:0 1 auto;
    font-size:12px;
    padding:8px 16px;
    max-width:48%;
    min-width:70px;
    white-space:nowrap}

.p9-pagination {
    flex-direction:column;
    gap:12px;
    align-items:center;
    width:100%;
    max-width:100%}

.p9-info {
    font-size:13px;
    text-align:center}

.p9-pages {
    flex-wrap:wrap;
    justify-content:center;
    max-width:100%}

.p9-page {
    padding:8px 12px;
    font-size:14px;
    min-width:40px;
    text-align:center}

.p9-bulk-actions {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    max-width:100%;
    width:100%}

.p9-bulk-actions button {
    flex:1 1 auto;
    min-width:fit-content;
    white-space:nowrap}

.p9-select-all-bar {
    gap:8px;
    align-items:flex-start;
    max-width:100%;
    width:100%}

}

/* ── Responsive: mobile phones ──────────────────────────────────── */
@media (max-width:480px) {
    .p9-products-toolbar {
    padding:10px}

.p9-toolbar-left select {
    width:100%;
    max-width:100%;
    margin-bottom:6px}

.p9-toolbar-right {
    justify-content:center}

.p9-product-image {
    height:160px}

.p9-products-container.list .p9-product-image {
    height:180px}

.p9-product-card {
    padding:12px}

.p9-product-actions {
    flex-direction:column;
    gap:6px}

.p9-btn-action {
    width:100%;
    max-width:100%}

.p9-products-container.list .p9-product-actions {
    flex-direction:row}

.p9-products-container.list .p9-btn-action {
    flex:0 1 auto;
    font-size:11px;
    padding:8px 12px;
    max-width:48%;
    min-width:60px}

.p9-product-pricing {
    flex-wrap:wrap;
    gap:6px}

.p9-product-price {
    font-size:18px}

.p9-page {
    min-width:44px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center}

}

/* ── Responsive: landscape phones ───────────────────────────────── */
@media (max-width:768px) and (orientation:landscape) {
    .p9-products-container.grid {
    grid-template-columns:repeat(2,1fr)}

.p9-product-image {
    height:150px}

}


/* ============================================
   PRODUCTS TAB STYLES
   ============================================ */
/* Products Tab Styles */
:root{
    --p9-accent:var(--p9-grad-start, #1E90FF);
    --p9-accent-end:#000000;
    --p9-success:#059669;
    --p9-danger:#ef4444;
    --p9-bg-light:#f8fafc;
    --p9-panel-light:#ffffff;
    --p9-border-light:#e2e8f0;
    --p9-text-light:#334155;
    --p9-muted-light:#64748b;
    --p9-bg-dark:#4a4a4a;
    --p9-panel-dark:rgba(60,60,60,.92);
    --p9-border-dark: transparent;
    --p9-text-dark:#ffffff;
    --p9-muted-dark:#cbd5e1;
    --p9-meta-border-light:linear-gradient(135deg, var(--p9-accent) 0%, #ffffff 100%);
    --p9-meta-border-dark:linear-gradient(135deg, var(--p9-accent) 0%, #000000 100%);
    --p9-radius:12px;
    --p9-shadow:0 8px 32px rgba(0,0,0,.15)}
body{
    --p9-bg:var(--p9-bg-light);
    --p9-panel:var(--p9-panel-light);
    --p9-border:var(--p9-border-light);
    --p9-text:var(--p9-text-light);
    --p9-muted:var(--p9-muted-light)}
body.portalcloud9-dark{
    --p9-bg:var(--p9-bg-dark);
    --p9-panel:var(--p9-panel-dark);
    --p9-border:var(--p9-border-dark);
    --p9-text:var(--p9-text-dark);
    --p9-muted:var(--p9-muted-dark)}
.p9-products-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    background:var(--p9-panel);
    border:1px solid var(--p9-border);
    border-radius:var(--p9-radius);
    padding:8px 12px;
    margin-bottom:16px;
    flex-wrap:wrap}
.p9-toolbar-left{
    display:flex;
    align-items:center;
    gap:6px;
    flex:1 1 auto}
.p9-toolbar-right{
    display:flex;
    align-items:center;
    gap:6px}
.p9-import-export-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 14px;
    border:none;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:all .3s ease;
    background:linear-gradient(135deg,var(--p9-accent) 0,var(--p9-accent-end) 100%);
    color:#fff}
.p9-import-export-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(30,144,255,.3)}
.p9-import-export-btn:disabled{
    opacity:0.6;
    cursor:not-allowed;
    transform:none}
.p9-import-export-btn svg{
    width:16px;
    height:16px;
    stroke:#fff;
    fill:none}
#p9-notification{
    position:fixed;
    top:20px;
    right:20px;
    padding:16px 24px;
    border-radius:12px;
    background:var(--p9-panel);
    border:1px solid var(--p9-border);
    box-shadow:var(--p9-shadow);
    z-index:999999;
    display:none;
    font-size:14px;
    font-weight:600;
    max-width:400px}
#p9-notification.success{
    background:linear-gradient(135deg,var(--p9-success),#047857);
    color:#fff;
    border-color:var(--p9-success)}
#p9-notification.error{
    background:linear-gradient(135deg,var(--p9-danger),#dc2626);
    color:#fff;
    border-color:var(--p9-danger)}
.p9-format-modal{
    display:none;
    position:fixed;
    z-index:999999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(4px)}
.p9-modal-content{
    position:relative;
    background:var(--p9-panel);
    margin:10% auto;
    padding:32px;
    border:1px solid var(--p9-border);
    border-radius:16px;
    width:90%;
    max-width:500px;
    box-shadow:var(--p9-shadow);
    animation:modalSlideIn 0.3s ease}
@keyframes modalSlideIn{
    from{
        opacity:0;
        transform:translateY(-30px)}
    to{
        opacity:1;
        transform:translateY(0)}}
.p9-modal-close{
    position:absolute;
    top:16px;
    right:20px;
    color:var(--p9-muted);
    font-size:32px;
    font-weight:bold;
    cursor:pointer;
    line-height:1}
.p9-modal-close:hover{
    color:var(--p9-text)}
.p9-modal-content h3{
    margin:0 0 8px 0;
    font-size:24px;
    font-weight:700;
    color:var(--p9-text)}
.p9-modal-content p{
    margin:0 0 24px 0;
    color:var(--p9-muted);
    font-size:14px}
.p9-format-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px}
.p9-format-option,
.p9-export-format-option,
.p9-import-format-option{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:24px 16px;
    border:2px solid var(--p9-border);
    border-radius:12px;
    background:var(--p9-bg);
    cursor:pointer;
    transition:all 0.3s ease;
    text-align:center}
.p9-format-option:hover,
.p9-export-format-option:hover,
.p9-import-format-option:hover{
    border-color:var(--p9-accent);
    background:linear-gradient(135deg,rgba(30,144,255,0.1),rgba(0,0,0,0.05));
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(30,144,255,0.2)}
.p9-format-option svg,
.p9-export-format-option svg,
.p9-import-format-option svg{
    stroke:var(--p9-accent);
    flex-shrink:0}
.p9-format-option strong,
.p9-export-format-option strong,
.p9-import-format-option strong{
    font-size:18px;
    font-weight:700;
    color:var(--p9-text);
    margin:0}
.p9-format-option span,
.p9-export-format-option span,
.p9-import-format-option span{
    font-size:13px;
    color:var(--p9-muted);
    line-height:1.4}
@media(max-width:600px){
    .p9-format-options{
        grid-template-columns:1fr}
    .p9-modal-content{
        margin:20% auto;
        padding:24px}}
.p9-toolbar-left input[type=search],.p9-toolbar-left select{
    width:220px;
    font-size:13px;
    border-radius:999px;
    padding:6px 12px;
    border:1px solid var(--p9-border)}
/* ══════════════════════════════════════════════════════════════
   DARK MODE — Borderless cards + elevation shadows
   Matches the pattern used in all other portal sections.
   ══════════════════════════════════════════════════════════════ */
body.portalcloud9-dark .p9-product-card,
body.portalcloud9-dark .p9-modal-content,
body.portalcloud9-dark .p9-notification-toast,
body.portalcloud9-dark .p9-notice-expired {
    border: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.25) !important;
}
body.portalcloud9-dark .p9-product-card:hover {
    box-shadow: 0 6px 28px rgba(0,0,0,.60), 0 2px 8px rgba(0,0,0,.3) !important;
}
/* Outline toolbar buttons → gradient border */
body.portalcloud9-dark .p9-export-btn,
body.portalcloud9-dark .p9-import-btn,
body.portalcloud9-dark .p9-view-btn {
    border: 1.5px solid transparent !important;
    background-image:
        linear-gradient(var(--p9-panel, rgba(60,60,60,.92)), var(--p9-panel, rgba(60,60,60,.92))),
        linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, var(--p9-grad-end, #000) 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}
/* Filter select inputs — subtle border in dark mode */
body.portalcloud9-dark .p9-filters-row select {
    border-color: rgba(255,255,255,.12) !important;
}