/* Portal Klien - berdiri sendiri, tidak bergantung pada theme. Semua kelas berawalan .srgp */
.srgp, .srgp * { box-sizing: border-box; }
.srgp { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #1d2327; background: #f4f6f8; --srgp-accent: #1d4f91; }
.srgp a { color: var(--srgp-accent); }
.srgp h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .25rem; }
.srgp h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.srgp-wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.srgp-top { background: #fff; border-bottom: 1px solid #dcdfe3; }
.srgp-top__in { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; flex-wrap: wrap; }
.srgp-brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--srgp-accent) !important; }
.srgp-nav { display: flex; align-items: center; gap: 4px; }
.srgp-nav a, .srgp-link { color: #1d2327; text-decoration: none; padding: 8px 12px; border-radius: 6px; font: inherit; background: none; border: 0; cursor: pointer; }
.srgp-nav a:hover, .srgp-link:hover { background: #eef1f5; }
.srgp-inline { display: inline; margin: 0; }
.srgp-main { padding-top: 24px; padding-bottom: 32px; min-height: 60vh; }
.srgp-foot { padding-top: 16px; padding-bottom: 32px; color: #646970; font-size: .85rem; }
.srgp-muted { color: #646970; }
.srgp-small { font-size: .85rem; }

.srgp-card { background: #fff; border: 1px solid #dcdfe3; border-radius: 10px; padding: 18px 20px; margin: 16px 0; }
.srgp-login { max-width: 420px; margin: 48px auto; }
.srgp label { display: block; font-weight: 600; margin: 14px 0 4px; }
.srgp input[type=hidden] { display: none; }
.srgp input[type=text], .srgp input[type=password] { width: 100%; padding: 11px 12px; border: 1px solid #b8bec4; border-radius: 8px; font: inherit; background: #fff; }
.srgp input:focus { outline: 2px solid var(--srgp-accent); outline-offset: 1px; }
.srgp-check { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.srgp-btn { display: inline-block; background: var(--srgp-accent); color: #fff !important; border: 0; border-radius: 8px; padding: 11px 18px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; margin-top: 16px; }
.srgp-btn:hover { filter: brightness(1.1); }
.srgp-btn--full { width: 100%; }
.srgp-alert { padding: 10px 14px; border-radius: 8px; margin: 14px 0; background: #fff8e5; border: 1px solid #f0d78c; }
.srgp-alert--err { background: #fdecea; border-color: #f0b4ae; color: #7a1d16; }
.srgp-alert--ok { background: #e8f6ec; border-color: #a9d8b6; color: #14532d; }

.srgp-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.srgp-stat { background: #fff; border: 1px solid #dcdfe3; border-radius: 10px; padding: 12px 18px; flex: 1 1 100px; min-width: 0; max-width: 220px; }
.srgp-stat b { display: block; font-size: 1.7rem; line-height: 1.1; }
.srgp-stat span { color: #646970; font-size: .85rem; }
.srgp-tabs { display: flex; gap: 6px; margin: 12px 0; }
.srgp-tabs a, .srgp-pager a { padding: 6px 14px; border-radius: 999px; background: #e9edf1; text-decoration: none; color: #1d2327; }
.srgp-tabs a.is-on, .srgp-pager a.is-on { background: var(--srgp-accent); color: #fff; }
.srgp-pager { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }

.srgp-tablewrap { padding: 0; overflow-x: auto; }
.srgp-table { width: 100%; border-collapse: collapse; }
.srgp-table th, .srgp-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #eef0f2; white-space: nowrap; }
.srgp-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #646970; background: #fafbfc; }
.srgp-table tr:last-child td { border-bottom: 0; }

.srgp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.srgp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.srgp-kv dt { font-size: .78rem; color: #646970; text-transform: uppercase; letter-spacing: .03em; }
.srgp-kv dd { margin: 2px 0 0; }
.srgp-sizes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.srgp-sizes > div { border: 1px solid #dcdfe3; border-radius: 8px; padding: 6px 12px; text-align: center; min-width: 64px; }
.srgp-sizes span { display: block; font-size: .78rem; color: #646970; }
.srgp-sizes__tot { background: #f4f6f8; }
.srgp-log { list-style: none; margin: 0; padding: 0; }
.srgp-log li { padding: 8px 0; border-bottom: 1px solid #eef0f2; }
.srgp-log li:last-child { border-bottom: 0; }

.srgp-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 18px 0; overflow-x: auto; }
.srgp-steps li { flex: 1 0 84px; text-align: center; font-size: .78rem; color: #646970; }
.srgp-steps li span { display: block; width: 28px; height: 28px; line-height: 28px; margin: 0 auto 4px; border-radius: 50%; background: #dcdfe3; color: #50575e; font-weight: 700; }
.srgp-steps li.is-done span { background: #2e7d4f; color: #fff; }
.srgp-steps li.is-now span { background: var(--srgp-accent); color: #fff; box-shadow: 0 0 0 4px rgba(29, 79, 145, .18); }
.srgp-steps li.is-now { color: #1d2327; font-weight: 700; }

/* Lencana status (dipakai bersama SRG_Order::badge) */
.srgp .srg-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #eef0f2; color: #50575e; white-space: nowrap; }
.srgp .srg-tone--blue { background: #dbe8fb; color: #0a3d91; }
.srgp .srg-tone--amber { background: #fcf0c3; color: #6b4e00; }
.srgp .srg-tone--purple { background: #e9defa; color: #4b2a8a; }
.srgp .srg-tone--green { background: #d7f0dd; color: #0a5a23; }
.srgp .srg-tone--red { background: #f8d7da; color: #8a1c24; }

@media (max-width: 720px) {
	.srgp-grid { grid-template-columns: 1fr; }
	.srgp-table thead { display: none; }
	.srgp-table, .srgp-table tbody, .srgp-table tr, .srgp-table td { display: block; width: 100%; }
	.srgp-table tr { padding: 10px 14px; border-bottom: 1px solid #dcdfe3; }
	.srgp-table td { border: 0; padding: 3px 0; white-space: normal; display: flex; justify-content: space-between; gap: 12px; }
	.srgp-table td::before { content: attr(data-l); color: #646970; font-size: .8rem; }
}

/* Permintaan order */
.srgp-btn--ghost { background: #fff; color: var(--srgp-accent) !important; border: 1px solid var(--srgp-accent); }
.srgp-btn--danger { background: #b32d2e; }
.srgp select, .srgp textarea, .srgp input[type=date], .srgp input[type=number] { width: 100%; padding: 11px 12px; border: 1px solid #b8bec4; border-radius: 8px; font: inherit; background: #fff; }
.srgp textarea { resize: vertical; }
.srgp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.srgp-form .srgp-btn { margin-right: 6px; }
.srgp-errs { margin: 6px 0 0 18px; padding: 0; }
.srgp-sizesform { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.srgp-sz { display: grid; grid-template-columns: 1fr 88px; gap: 6px; }
@media (max-width: 720px) { .srgp-two { grid-template-columns: 1fr; } }
.srgp input, .srgp select, .srgp textarea { box-sizing: border-box; line-height: 1.4; min-height: 44px; }
.srgp textarea { min-height: 88px; }
.srgp-sz input { min-width: 0; }

/* Bilah cari/filter + pagination */
.srgp-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; background: #fff; border: 1px solid #dcdfe3; border-radius: 10px; padding: 12px; margin: 10px 0; }
.srgp-bar__f { display: flex; flex-direction: column; min-width: 130px; }
.srgp-bar__f--q { flex: 1 1 220px; }
.srgp-bar__f label { margin: 0 0 4px; font-size: .82rem; }
.srgp-bar__f--btn { flex-direction: row; gap: 6px; align-items: flex-end; min-width: 0; }
.srgp-pagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0; }
.srgp-pagebar .srgp-pager { margin: 0; }
.srgp-pager__gap { padding: 6px 2px; color: #6b7280; }
@media (max-width: 720px) { .srgp-bar__f { flex: 1 1 45%; } .srgp-bar__f--q { flex-basis: 100%; } }
.srgp-bar__f { flex: 1 1 140px; min-width: 0; }
.srgp-bar__f--q { flex: 2 1 240px; }
.srgp-bar__f--btn { flex: 0 0 auto; }
.srgp-bar select, .srgp-bar input[type=text] { width: 100%; min-width: 0; }

/* Panel Staf */
.srgp-brand small { font-weight: 400; color: #646970; margin-left: 4px; }
.srgp-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: #b32d2e; color: #fff; font-size: .75rem; line-height: 18px; text-align: center; }
.srgp-nav { flex-wrap: wrap; }
.srgp-panel .srgp-wrap { max-width: 1180px; }
.srgp-formwide { max-width: none; }
.srgp-form.srgp-formwide { background: transparent; border: 0; padding: 0; box-shadow: none; }
.srgp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.srgp-btn--small { padding: 4px 10px; font-size: .85rem; }
.srgp-danger { border-color: #f0b4ae; }
.srgp-danger h2 { color: #7a1d16; }
.srgp-chip { display: inline-block; background: #e9edf1; border-radius: 999px; padding: 4px 12px; }
.srgp-stat a { color: inherit; text-decoration: none; display: block; }
.srgp-stat--warn b { color: #b32d2e; }
.srgp-pass { font-size: 1.05rem; user-select: all; }
.srgp-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 900px) { .srgp-three { grid-template-columns: 1fr; } }
.srgp-inline { display: inline; }
.srgp-panel hr { border: 0; border-top: 1px solid #dcdfe3; margin: 16px 0; }
/* Widget form Klien/Order (dibagi dengan wp-admin) di dalam panel */
.srgp-panel .srg-group { border: 1px solid #dcdfe3; border-radius: 10px; padding: 8px 16px 16px; margin: 0 0 16px; background: #fff; min-width: 0; }
.srgp-panel .srg-group legend { font-weight: 700; padding: 0 8px; }
.srgp-panel .srg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.srgp-panel .srg-field--wide { grid-column: span 2; }
.srgp-panel .srg-field label { display: block; font-weight: 600; margin: 12px 0 4px; }
.srgp-panel .srg-input, .srgp-panel .srg-field input, .srgp-panel .srg-field select, .srgp-panel .srg-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #b8bec4; border-radius: 8px; font: inherit; background: #fff; min-height: 44px; }
.srgp-panel .srg-field textarea { min-height: 88px; }
.srgp-panel .srg-ro { background: #f3f4f6; color: #50575e; }
.srgp-panel .srg-sizes__table { width: 100%; border-collapse: collapse; }
.srgp-panel .srg-sizes__table th, .srgp-panel .srg-sizes__table td { padding: 4px 8px 4px 0; text-align: left; }
.srgp-panel .srg-sizes__table input { min-height: 38px; }
.srgp-panel .srg-sizes__table input.srg-size-label { width: 130px; }
.srgp-panel .srg-sizes__table input.srg-size-qty { width: 110px; }
.srgp-panel .srg-req-val { padding: 4px 0; overflow-wrap: anywhere; }
.srgp-panel .srg-log { list-style: none; margin: 0; padding: 0; }
.srgp-panel .srg-log li { padding: 6px 0; border-bottom: 1px solid #eef0f2; }
.srgp-panel .srg-log .description { color: #646970; font-size: .85rem; }
.srgp-panel .srg-badge, .srgp-panel .srg-tone--gray, .srgp-panel .srg-tone--blue { }
.srgp-panel .srg-overdue { color: #b32d2e; font-weight: 600; font-size: .8rem; }
.srgp-panel .srg-klien-filter { margin-bottom: 6px; }
@media (max-width: 720px) { .srgp-panel .srg-grid { grid-template-columns: 1fr; } .srgp-panel .srg-field--wide { grid-column: auto; } }

.srgp-actions .srgp-btn, .srgp-head .srgp-btn, .srgp-table .srgp-btn, .srgp-danger .srgp-btn { margin-top: 0; }
.srgp-actions form, .srgp-table form { display: inline-block; margin: 0; }
.srgp-head > div { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.srgp-table td.srgp-actions { display: table-cell; white-space: nowrap; }
.srgp input[type=email], .srgp input[type=tel], .srgp input[type=url] { width: 100%; padding: 11px 12px; border: 1px solid #b8bec4; border-radius: 8px; font: inherit; background: #fff; }
.srgp input[type=checkbox], .srgp input[type=radio] { width: auto; min-height: 0; padding: 0; }
.srgp-nav { justify-content: flex-end; }
.srgp-nav .srgp-inline { display: block; }
.srgp-panel .button, .srgp-panel .srg-size-add { background: #fff; color: var(--srgp-accent); border: 1px solid var(--srgp-accent); border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; margin-top: 8px; }
.srgp-panel .srg-sizes__table { margin-bottom: 4px; }