.catalog-toolbar { margin-bottom: 2.25rem; }
.catalog-browser { display: grid; grid-template-columns: 250px minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid #e2ddea; border-radius: 24px; box-shadow: 0 22px 60px rgba(31, 17, 57, .07); }
.catalog-sidebar { border-right: 1px solid #e8e3ee; background: #fcfbfe; }
.sidebar-title { display: flex; align-items: center; justify-content: space-between; min-height: 105px; padding: 1.5rem; border-bottom: 1px solid #ebe6f0; }
.sidebar-title div { display: grid; gap: .25rem; }
.sidebar-title span { color: #91889d; font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.sidebar-title strong { color: var(--cat-ink); font: 700 1rem "Plus Jakarta Sans", sans-serif; }
.sidebar-title button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: #71687e; font-size: 1.15rem; cursor: pointer; }
.sidebar-title button:hover { background: #f0ebfa; color: var(--cat-purple); }
.category-list { display: grid; padding: .8rem; }
.category-list button { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; padding: .85rem .9rem; border: 0; border-radius: 11px; background: transparent; color: #5e566a; text-align: left; font: 600 .78rem/1.4 Inter, sans-serif; cursor: pointer; transition: .2s ease; }
.category-list button b { min-width: 30px; padding: .25rem .4rem; border-radius: 999px; background: #f0edf5; color: #81788e; text-align: center; font-size: .61rem; }
.category-list button:hover { background: #f5f1fc; color: var(--cat-purple); }
.category-list button.active { background: linear-gradient(135deg, #713df2, #8651f5); color: #fff; box-shadow: 0 9px 20px rgba(113, 61, 242, .2); }
.category-list button.active b { background: rgba(255, 255, 255, .2); color: #fff; }
.catalog-content { min-width: 0; padding: 1.5rem; }
.browser-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.browser-heading h3 { margin: .35rem 0 .2rem; color: var(--cat-ink); font: 700 clamp(1.25rem, 2vw, 1.7rem) "Plus Jakarta Sans", sans-serif; letter-spacing: -.035em; }
.browser-heading p { margin: 0; color: #82798e; font-size: .77rem; }
.table-search { max-width: 370px; padding: .8rem 1rem; box-shadow: none; }
.operator-panel { padding: 1rem; border: 1px solid #e4dfeb; border-radius: 15px; background: #faf9fc; }
.operator-panel > span { display: block; margin-bottom: .7rem; color: #92899f; font-size: .6rem; font-weight: 800; letter-spacing: .13em; }
.operator-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.operator-list button { padding: .55rem .75rem; border: 1px solid #ddd7e6; border-radius: 999px; background: #fff; color: #5f566d; font: 700 .68rem Inter, sans-serif; cursor: pointer; }
.operator-list button small { margin-left: .25rem; color: #9b92a5; }
.operator-list button:hover, .operator-list button.active { border-color: var(--cat-purple); background: var(--cat-purple); color: #fff; }
.operator-list button.active small { color: #e8deff; }
.product-table-panel { margin-top: 1rem; overflow: hidden; border: 1px solid #e4dfeb; border-radius: 16px; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; background: #faf9fc; border-bottom: 1px solid #e7e2ed; color: #675e73; font-size: .72rem; }
.table-toolbar label { display: flex; align-items: center; gap: .5rem; }
.table-toolbar select, .table-toolbar button { border: 1px solid #ddd7e6; border-radius: 9px; background: #fff; color: #4b4258; font: 700 .7rem Inter, sans-serif; }
.table-toolbar select { padding: .48rem 1.7rem .48rem .65rem; }
.table-toolbar button { padding: .55rem .75rem; cursor: pointer; }
.table-toolbar div { display: flex; gap: .45rem; }
.product-table-wrap { overflow-x: auto; }
.product-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.product-table th { padding: .8rem 1rem; background: #f6f4f9; color: #82798f; text-align: left; font-size: .61rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.product-table td { padding: .85rem 1rem; border-top: 1px solid #eeeaf2; color: #5d5469; font-size: .76rem; vertical-align: middle; }
.product-table tbody tr { transition: background-color .18s ease; }
.product-table tbody tr:hover { background: #fbf9ff; }
.product-table tbody tr[hidden] { display: none; }
.product-table td:nth-child(2) { min-width: 260px; }
.product-table td:nth-child(2) strong { display: block; color: #251a37; font-size: .79rem; }
.product-table td:nth-child(2) small { display: block; margin-top: .24rem; color: #9a91a5; font-size: .62rem; }
.table-code { display: inline-flex; padding: .35rem .5rem; border-radius: 7px; background: #f0ebff; color: var(--cat-purple); font-weight: 800; }
.price-column { text-align: right !important; white-space: nowrap; }
.price-column strong { color: #251a37; }
.table-status { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .56rem; border-radius: 999px; background: #eaf9f4; color: #087c59; font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.table-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.table-status.status-gangguan { background: #fff0ed; color: #c63d32; }
.table-status.status-kosong { background: #f0eef3; color: #72697d; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid #e7e2ed; background: #faf9fc; color: #80778c; font-size: .68rem; }
.table-footer div { display: flex; align-items: center; gap: .45rem; }
.table-footer button, .table-footer div span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ded8e8; border-radius: 8px; background: #fff; color: #51475e; font-weight: 800; }
.table-footer button { cursor: pointer; }
.table-footer button:disabled { opacity: .4; cursor: default; }
.table-footer div span { border-color: var(--cat-purple); background: var(--cat-purple); color: #fff; }
.product-table-panel .catalog-no-result { margin: 1rem; padding: 2.5rem 1rem; }
@media (max-width: 900px) { .catalog-browser { grid-template-columns: 1fr; } .catalog-sidebar { border-right: 0; border-bottom: 1px solid #e8e3ee; } .sidebar-title { min-height: auto; padding: 1rem; } .category-list { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem; } .category-list button { flex: 0 0 auto; width: auto; white-space: nowrap; } }
@media (max-width: 650px) { .catalog-content { padding: 1rem; } .browser-heading { align-items: stretch; flex-direction: column; gap: 1rem; } .table-search { max-width: none; } .table-toolbar { align-items: flex-start; flex-direction: column; } .table-footer { align-items: flex-start; flex-direction: column; } }
.type-panel{margin-top:16px}.type-panel .operator-list{max-height:190px;overflow:auto;align-content:start}.type-panel button{white-space:normal;text-align:left}.type-panel[hidden]{display:none}@media(max-width:650px){.type-panel .operator-list{max-height:170px;gap:7px}.type-panel button{font-size:12px;padding:9px 12px;min-height:40px}}