/* products sayfalari - yeni tasarim (cl-* / db-* / dp-* desenleri app.css icinde)
   Sinif oneki: pr- */

/* --------------------------------------------------------------------------
   Ortak
   -------------------------------------------------------------------------- */

.pr-page {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pr-page > form { display: flex; flex-direction: column; gap: 14px; }

.pr-muted { color: var(--ink-3); font-weight: 400; }

.pr-card-pad { padding: 0 20px; }

.pr-count {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 500;
    vertical-align: 1px;
}

.pr-link { color: var(--brand); text-decoration: none; }

/* Tur rozetleri: hizmet mor, urun mavi, profil turuncu */
.cl-pill.pr-pill-service { background: var(--violet-soft); color: var(--violet); }
.cl-pill.pr-pill-product { background: var(--brand-soft); color: var(--brand); }
.cl-pill.pr-pill-profile { background: var(--warn-soft); color: var(--warn-ink); }
.cl-pill.pr-pill-paint { background: var(--violet-soft); color: var(--violet); }
.cl-pill.pr-pill-low { background: var(--warn-soft); color: var(--warn-ink); }
.cl-pill.pr-pill-out { background: var(--debt-soft); color: var(--debt-ink); }

.pr-icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
}

.pr-icon .icon { font-size: 16px; }
.pr-icon.is-service, .pr-avatar.is-service { background: var(--violet-soft); color: var(--violet); }
.pr-icon.is-profile, .pr-avatar.is-profile { background: var(--warn-soft); color: var(--warn-ink); }
.pr-icon.is-paint, .pr-avatar.is-paint { background: var(--violet-soft); color: var(--violet); }

/* Birim kisaltmasi rozeti (detay, birimler) */
.pr-unit-badge {
    flex: none;
    min-width: 46px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}

.pr-unit-badge.is-default { background: var(--brand); color: #fff; }
.dark .pr-unit-badge.is-default { color: #0b1a22; }

/* Satir silme simgesi */
.pr-move-del {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--ink-3);
}

.pr-move-del .icon { font-size: 17px; }
.pr-move-del:hover { background: var(--debt-soft); color: var(--debt); }

/* --------------------------------------------------------------------------
   Stok listesi (cl-* iskeleti)
   -------------------------------------------------------------------------- */

.pr-table {
    --cl-cols: 120px minmax(240px, 2.4fr) 120px minmax(140px, 1.1fr) 150px 160px;
}

.pr-code { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-row .pr-name { display: flex; align-items: center; gap: 12px; }
.pr-type { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-cat { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pr-stock, .pr-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}

.pr-stock b, .pr-price b { font-weight: 600; }
.pr-stock b small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pr-stock > small, .pr-price > small { font-size: 12px; color: var(--ink-3); }
.pr-stock > small.is-late, .pr-stock > small.is-payable { font-weight: 500; }
.cl-row-head .pr-stock, .cl-row-head .pr-price { display: block; }

.pr-sub-mobile, .pr-only-mobile { display: none; }

@media (max-width: 899px) {
    .pr-table .pr-row { grid-template-columns: minmax(0, 1fr) auto; }
    .pr-row .pr-code, .pr-row .pr-type, .pr-row .pr-cat, .pr-row .pr-stock { display: none; }
    .pr-row .pr-name { padding-left: 14px; }
    .pr-row .pr-price { padding-right: 14px; }
    .pr-sub-mobile { display: inline; }
    .pr-only-mobile { display: inline; }
    .pr-only-wide { display: none; }
}

/* --------------------------------------------------------------------------
   Stok karti (dp-* deseni)
   -------------------------------------------------------------------------- */

.pr-amount-unit { font-size: 15px; font-weight: 600; color: var(--ink-3); }
.dp-amount.pr-muted { font-size: 22px; color: var(--ink-3); }

.pr-price-table { min-width: 460px; }
.pr-price-table td { vertical-align: middle; }
.pr-price-table td span.num { display: block; }

.pr-unit-cell { display: flex; align-items: center; gap: 10px; }
.pr-unit-cell > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.pr-margin.is-good { color: var(--credit); }
.pr-margin.is-mid { color: var(--warn-ink); }
.pr-margin.is-bad { color: var(--debt); }

.pr-move-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px 20px 4px;
    border: 1px solid var(--divider);
    border-radius: 10px;
    overflow: hidden;
}

.pr-move-totals > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border-right: 1px solid var(--divider);
}

.pr-move-totals > div:last-child { border-right: 0; }
.pr-move-totals span { font-size: 12px; color: var(--ink-2); }
.pr-move-totals b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.pr-move-totals b small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pr-move-totals .pr-in { color: var(--credit); }
.pr-move-totals .pr-out { color: var(--debt); }

.pr-moves { padding: 0 14px; }
.pr-moves .db-list-meta a { color: var(--brand); text-decoration: none; }
.pr-moves .db-list-amount small { font-size: 11.5px; font-weight: 500; }

.pr-move-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.pr-desc {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Stok giris / cikis paneli bilgi kutusu */
.pr-move-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--radius);
    font-size: 12.5px;
    line-height: 1.45;
}

.pr-move-note .icon { font-size: 20px; flex: none; }
.pr-move-note.is-in { background: var(--credit-soft); color: var(--credit-ink); }
.pr-move-note.is-out { background: var(--debt-soft); color: var(--debt-ink); }

@media (max-width: 640px) {
    .pr-move-totals { margin: 12px 16px 4px; }
    .pr-move-totals > div { padding: 9px 10px; }
    .pr-move-totals b { font-size: 15px; }
    .pr-moves { padding: 0 8px; }
}

/* --------------------------------------------------------------------------
   Birimler ve kategoriler
   -------------------------------------------------------------------------- */

.pr-lines { margin-top: 10px; display: flex; flex-direction: column; }

.pr-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-top: 1px solid var(--divider);
}

.pr-line:hover { background: var(--surface-2); }

.pr-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.pr-line-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.pr-line-meta { font-size: 12px; color: var(--ink-3); }

.pr-line-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
}

.pr-cat-icon {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--divider);
    color: var(--ink-2);
}

.pr-cat-icon .icon { font-size: 15px; }

@media (max-width: 640px) {
    .pr-line { padding: 10px 16px; }
}

/* --------------------------------------------------------------------------
   Profil fiyatlari (unit-table / bulk-tool parcalari korunur)
   -------------------------------------------------------------------------- */

.pr-bulk { margin-top: 14px; }

.db-btn.pr-btn-sm {
    width: auto;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
}

.pr-pp-table {
    margin-top: 12px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
}

.pr-pp-table .unit-table-head,
.pr-pp-table .unit-row { padding-left: 20px; padding-right: 20px; }

.pr-pp-table .unit-table-head {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-2);
}

.pr-pp-table .unit-name { font-size: 12px; }

/* Ust cubugun genis ekranda uzun profil satirlari icin daha genis fiyat alanlari */
@media (min-width: 900px) {
    .pr-pp-table .unit-table-head,
    .pr-pp-table .unit-row { grid-template-columns: minmax(0, 1fr) 140px 140px 70px; }

    .pr-pp-table .unit-table-head:not(:has(.col-margin)),
    .pr-pp-table:not(:has(.col-margin)) .unit-row { grid-template-columns: minmax(0, 1fr) 160px; }
}

.pr-inline-pill { margin-left: 4px; vertical-align: 1px; }
.pr-warn-text { color: var(--warn-ink); }

.pr-pp-option { margin: 0; border-top: 1px solid var(--divider); }
.pr-pp-option ul { background: transparent; }
.pr-pp-option ul::before, .pr-pp-option ul::after { display: none; }

.pr-pp-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 20px 8px;
    border-top: 1px solid var(--divider);
    font-size: 12.5px;
    color: var(--ink-3);
}

.db-btn.pr-submit {
    width: auto;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 640px) {
    .pr-pp-table .unit-table-head,
    .pr-pp-table .unit-row { padding-left: 14px; padding-right: 14px; }
    .pr-pp-foot { padding: 12px 14px 8px; }
    .db-btn.pr-submit { flex: 1 1 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Urun formu: birim / fiyat tablosu form kenar boslugunu izler
   -------------------------------------------------------------------------- */

.unit-table.pr-form-units { margin: 0 var(--fm-gutter, 16px); }
.page[data-name="product-form"] .profile-summary { margin-left: var(--fm-gutter, 16px); margin-right: var(--fm-gutter, 16px); }

/* Stok karti gorseli */
.pr-image-field { margin: 0 16px; }
.pr-image-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
}
.pr-image-drop:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.pr-image-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pr-image-preview {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--ink-3);
    overflow: hidden;
}
.pr-image-preview .icon { font-size: 28px; }
.pr-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.pr-image-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pr-image-text b { font-size: 14px; font-weight: 600; color: var(--brand); }
.pr-image-text small { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.pr-image-remove { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--debt); cursor: pointer; }

/* Kart ve listede gorsel */
.pr-avatar.has-image, .pr-icon.has-image { padding: 0; overflow: hidden; background: var(--surface-2); }
.pr-avatar.has-image img, .pr-icon.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Urun detayi: ozet karti altinda fiyat / maliyet / kar / stok seridi
   -------------------------------------------------------------------------- */
.pd .dp-hero { gap: 18px 24px; }
.pd .dp-avatar.has-image { width: 64px; height: 64px; }
.pd-kpis {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    border: 1px solid var(--divider);
    border-radius: 10px;
    background: var(--surface-2);
    overflow: hidden;
}
.pd-kpi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 13px 16px;
    border-left: 1px solid var(--divider);
}
.pd-kpi:first-child { border-left: 0; }
.pd-kpi > span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pd-kpi > b {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pd-kpi > b.pr-muted { font-family: inherit; font-size: 16px; font-weight: 500; }
.pd-kpi > b .pr-amount-unit { font-family: var(--font-sans); font-size: 13px; }
.pd-kpi > small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-kpi.is-low > b { color: var(--warn-ink); }
.pd-kpi.is-out > b { color: var(--debt); }

@media (max-width: 560px) {
    .pd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-kpi { border-left: 0; border-top: 1px solid var(--divider); }
    .pd-kpi:nth-child(-n+2) { border-top: 0; }
    .pd-kpi:nth-child(2n) { border-left: 1px solid var(--divider); }
    .pd-kpi > b { font-size: 17px; }
    .pd-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
}

/* Profil fiyatlari: para birimi karisiksa satirdaki kod ve toplu secim */
.pr-cur { font-weight: 600; color: var(--ink-2); }
.pr-bulk [data-bulk-currency] {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
    font-size: 13px;
    color: inherit;
}