/* ============================================================
   components.css — Bootstrap component-class replacements
   styled with the Gojek identity (pill buttons, green primary,
   16px cards, compact tables). Markup keeps using the legacy
   class names (.btn, .card, .modal, ...) — this file provides
   their look without Bootstrap.
   ============================================================ */

/* ---------- mini reboot (was provided by Bootstrap) ---------- */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem; font-weight: 400; line-height: 1.5; color: #1A1A1A;
  background-color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 700; line-height: 1.25 }
h1 { font-size: 2.25rem } h2 { font-size: 1.75rem } h3 { font-size: 1.4rem }
h4 { font-size: 1.15rem } h5 { font-size: .95rem } h6 { font-size: .85rem }
p { margin-top: 0; margin-bottom: 1rem }
a { color: #0d6efd; text-decoration: underline } a:hover { color: #0a58ca }
img, svg { vertical-align: middle } img { max-width: 100%; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; margin: 0 }
button { border-radius: 0; cursor: pointer }
code, kbd, pre, samp { font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em }
code { color: #d63384 } pre { margin-bottom: 1rem; display: block; }
ol, ul { padding-left: 2rem } ul, ol { margin-top: 0; margin-bottom: 1rem }
dl, dd { margin-bottom: 1rem } dt { font-weight: 700 }
blockquote { margin: 0 0 1rem }
hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--c-border); opacity: .35 }
table { border-collapse: collapse; caption-side: bottom }
label { display: inline-block }
textarea { resize: vertical }
::placeholder { color: #9CA3AF; opacity: 1 }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: #fff; --btn-ink: var(--c-ink); --btn-line: var(--c-border);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .35rem; border: 1px solid var(--btn-line); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink);
  padding: .42rem 1rem; font-size: .875rem; font-weight: 600; line-height: 1.35;
  cursor: pointer; text-decoration: none; vertical-align: middle;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  user-select: none;
}
.btn:hover { background: color-mix(in srgb, var(--btn-bg) 92%, #000 8%); color: var(--btn-ink) }
.btn:disabled, .btn.disabled { opacity: .55; pointer-events: none }
.btn-sm { padding: .25rem .65rem; font-size: .76rem }
.btn-lg { padding: .6rem 1.4rem; font-size: 1rem }
.btn-xs { padding: .12rem .5rem; font-size: .68rem }
.btn-primary { --btn-bg: var(--c-primary); --btn-ink: #fff; --btn-line: var(--c-primary-dark) }
.btn-primary:hover { background: var(--c-primary-dark); color: #fff }
.btn-secondary, .btn-light { --btn-bg: #fff; --btn-ink: var(--c-ink); --btn-line: var(--c-border) }
.btn-secondary:hover, .btn-light:hover { background: #F4F5F7 }
.btn-success { --btn-bg: var(--c-success); --btn-ink: #fff; --btn-line: #146c43 }
.btn-success:hover { background: #146c43; color: #fff }
.btn-danger { --btn-bg: var(--c-danger); --btn-ink: #fff; --btn-line: #b02a37 }
.btn-danger:hover { background: #b02a37; color: #fff }
.btn-warning { --btn-bg: var(--c-warning); --btn-ink: #1A1A1A; --btn-line: #ffcd39 }
.btn-warning:hover { background: #ffcd39; color: #1A1A1A }
.btn-info { --btn-bg: var(--c-info); --btn-ink: #000; --btn-line: #0aa2c0 }
.btn-dark { --btn-bg: var(--c-dark); --btn-ink: #fff; --btn-line: #0a0c0d }
.btn-dark:hover { background: #0a0c0d; color: #fff }
.btn-link { --btn-bg: transparent; --btn-ink: var(--c-primary); --btn-line: transparent; font-weight: 500 }
.btn-link:hover { color: var(--c-primary-dark); text-decoration: underline }
.btn-outline-primary { --btn-bg: transparent; --btn-ink: var(--c-primary); --btn-line: var(--c-primary) }
.btn-outline-primary:hover { background: var(--c-primary); color: #fff }
.btn-outline-secondary { --btn-bg: transparent; --btn-ink: var(--c-muted); --btn-line: var(--c-border) }
.btn-outline-secondary:hover { background: #F4F5F7; color: var(--c-ink) }
.btn-outline-success { --btn-bg: transparent; --btn-ink: var(--c-success); --btn-line: var(--c-success) }
.btn-outline-success:hover { background: var(--c-success); color: #fff }
.btn-outline-danger { --btn-bg: transparent; --btn-ink: var(--c-danger); --btn-line: var(--c-danger) }
.btn-outline-danger:hover { background: var(--c-danger); color: #fff }
.btn-outline-warning { --btn-bg: transparent; --btn-ink: #997404; --btn-line: var(--c-warning) }
.btn-outline-warning:hover { background: var(--c-warning); color: #1A1A1A }
.btn-outline-light { --btn-bg: transparent; --btn-ink: #f8f9fa; --btn-line: rgba(255, 255, 255, .65) }
.btn-outline-light:hover { background: #f8f9fa; color: #1A1A1A }
.btn-group { display: inline-flex; border-radius: 999px; overflow: hidden }
.btn-group > .btn { border-radius: 0 }
.btn-group > .btn:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px }
.btn-group > .btn:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px }
.btn-group-sm > .btn { padding: .25rem .65rem; font-size: .76rem }

.btn-close {
  box-sizing: content-box; width: .75em; height: .75em; padding: .25em;
  border: 0; border-radius: 8px; background: transparent;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-size: contain; background-position: center;
  cursor: pointer; opacity: .45;
}
.btn-close:hover { opacity: .8 }

/* ---------- cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  min-width: 0; word-wrap: break-word;
}
.card-header {
  padding: .65rem .9rem; font-weight: 700; font-size: .85rem;
  border-bottom: 1px solid var(--c-line); border-radius: 16px 16px 0 0 !important;
  background: #fff; display: flex; align-items: center; gap: .5rem; min-height: 34px;
}
.card-body { padding: .9rem; flex: 1 1 auto }
.card-footer { padding: .65rem .9rem; border-top: 1px solid var(--c-line); border-radius: 0 0 16px 16px !important; background: #fff }
.card-title { font-weight: 700; font-size: .95rem; margin-bottom: .5rem }
.card-img-top { width: 100%; border-radius: 16px 16px 0 0; object-fit: cover }

/* ---------- modal (v-if + .d-block pattern, centered overlay) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100050; display: none;
  background: rgba(16, 18, 20, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow-x: hidden; overflow-y: auto; outline: 0;
}
.modal.d-block { display: block }
.modal-dialog { position: relative; width: auto; max-width: 560px; margin: 1.75rem auto; pointer-events: none }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem) }
.modal-dialog-scrollable { display: flex; max-height: calc(100% - 3.5rem) }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden }
.modal-dialog-scrollable .modal-body { overflow-y: auto }
.modal-sm { max-width: 340px } .modal-lg { max-width: 820px } .modal-xl { max-width: 1060px }
.modal-fullscreen { max-width: none; margin: 0; width: 100vw; height: 100vh; max-height: 100vh }
.modal-fullscreen .modal-content { height: 100%; border: 0; border-radius: 0 }
.modal-fullscreen .modal-body { overflow-y: auto }
.modal-content {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; pointer-events: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08);
  border: 1px solid rgba(0, 0, 0, .04);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.15rem .75rem; border-bottom: 1px solid var(--c-line);
}
.modal-title { font-size: 1rem; font-weight: 700; margin: 0 }
.modal-body { position: relative; padding: 1rem 1.15rem; flex: 1 1 auto }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: .75rem 1.15rem 1rem; border-top: 1px solid var(--c-line);
}
.mac-quota-modal { z-index: 100060 }

/* ---------- forms ---------- */
.form-label { display: inline-block; margin-bottom: .35rem; font-size: .78rem; font-weight: 600; color: var(--c-ink) }
.form-control, .form-select {
  display: block; width: 100%; padding: .45rem .8rem; font-size: .875rem; font-weight: 400;
  color: var(--c-ink); background: #fff; border: 1px solid #D1D5DB; border-radius: 12px;
  transition: border-color .15s, box-shadow .15s; appearance: none;
}
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 14px;
  padding-right: 2.25rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-primary); outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.form-control::placeholder { color: #9CA3AF }
.form-control:disabled, .form-control[readonly] { background: #F4F5F7; opacity: 1 }
.form-control-sm { padding: .3rem .6rem; font-size: .78rem; border-radius: 10px }
.form-control-lg { padding: .6rem 1rem; font-size: 1rem }
.form-control-plaintext { border: 0; background: transparent; padding: .45rem 0; box-shadow: none }
.form-control-color { padding: .25rem; width: 3rem }
.form-text { font-size: .75rem; color: var(--c-muted) }
.form-check { display: block; min-height: 1.35rem; padding-left: 1.6em; margin-bottom: .3rem }
.form-check-input {
  float: left; margin-left: -1.6em; margin-top: .18em; width: 1.1em; height: 1.1em;
  border: 1px solid #D1D5DB; border-radius: 5px; background: #fff; appearance: none;
  transition: background-color .15s, border-color .15s; cursor: pointer;
}
.form-check-input[type="radio"] { border-radius: 50% }
.form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary) }
.form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") }
.form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") }
.form-check-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); border-color: var(--c-primary) }
.form-check-label { font-size: .82rem; color: var(--c-ink) }
.form-switch { padding-left: 2.4em }
.form-switch .form-check-input { width: 2.1em; margin-left: -2.4em; border-radius: 999px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ccc'/%3e%3c/svg%3e") }
.form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") }
.input-group { display: flex; width: 100%; align-items: stretch }
.input-group .form-control { border-radius: 12px 0 0 12px }
.input-group .form-control:not(:last-child) { border-right: 0 }
.input-group-text {
  display: flex; align-items: center; padding: .45rem .8rem; font-size: .875rem;
  color: var(--c-muted); background: #F4F5F7; border: 1px solid #D1D5DB; border-radius: 0 12px 12px 0;
}
.input-group-sm .form-control { padding: .3rem .6rem; font-size: .78rem }

/* ---------- tables ---------- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch }
.table { width: 100%; border-collapse: collapse; font-size: 10px; vertical-align: middle; margin-bottom: 0 }
.table th, .table td { padding: .3rem .45rem; border-bottom: 1px solid var(--c-line); text-align: left }
.table thead th {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-muted); background: #FAFAFB; border-bottom: 1px solid var(--c-line); white-space: nowrap;
}
.table-hover tbody tr:hover { background: #F6FBF6 }
.table-sm th, .table-sm td { padding: .22rem .35rem }
.table-borderless th, .table-borderless td { border-bottom: 0 }
.table-light { background: #f8f9fa }
.table-light th, .table-light td { border-bottom: 0 }

/* ---------- badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .22em .6em; font-size: .62rem; font-weight: 700; line-height: 1.3;
  border-radius: 999px; letter-spacing: .02em; white-space: nowrap;
  background: #E5E7EB; color: var(--c-ink);
}
.badge.bg-primary { background: var(--c-primary); color: #fff }
.badge.bg-success { background: var(--c-success); color: #fff }
.badge.bg-danger { background: var(--c-danger); color: #fff }
.badge.bg-warning { background: var(--c-warning); color: #1A1A1A }
.badge.bg-info { background: var(--c-info); color: #000 }
.badge.bg-dark { background: var(--c-dark); color: #fff }
.badge.bg-light { background: #F4F5F7; color: var(--c-ink) }
.badge.text-bg-primary { background: var(--c-primary); color: #fff }

/* ---------- alerts ---------- */
.alert {
  position: relative; display: flex; align-items: flex-start; gap: .45rem;
  padding: .65rem .85rem; margin-bottom: .75rem; border-radius: 12px;
  border: 1px solid transparent; font-size: .82rem; font-weight: 500;
}
.alert-success { background: #EDFBF0; border-color: #C8EBCF; color: #0E5A26 }
.alert-danger { background: #FDF0F1; border-color: #F3C6CB; color: #9B2530 }
.alert-warning { background: #FFF8E5; border-color: #F5E1A4; color: #7A5B06 }
.alert-info { background: #EDF8FA; border-color: #C2E5EB; color: #0A5E6B }
.alert-light { background: #F8F9FA; border-color: var(--c-line); color: var(--c-ink) }
.alert-dismissible { padding-right: 2.4rem }
.alert-dismissible .btn-close { position: absolute; top: .55rem; right: .7rem }

/* ---------- spinner ---------- */
.spinner-border {
  display: inline-block; width: 1.4rem; height: 1.4rem;
  border: .18em solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: gj-spin .65s linear infinite; color: var(--c-primary);
}
.spinner-border-sm { width: .9rem; height: .9rem; border-width: .14em }
@keyframes gj-spin { to { transform: rotate(360deg) } }

/* ---------- nav / tabs ---------- */
.nav { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; list-style: none; padding: 0 }
.nav-tabs { border-bottom: 1px solid var(--c-line) }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0 }
.nav-tabs .nav-link.active { border-bottom-color: var(--c-primary); color: var(--c-primary-dark) }
.nav-pills .nav-link { border-radius: 999px }
.nav-pills .nav-link.active { background: var(--c-primary); color: #fff }
.nav-link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; font-size: .8rem; font-weight: 600;
  color: var(--c-muted); text-decoration: none; cursor: pointer;
  background: none; border: 0; transition: color .15s;
}
.nav-link:hover { color: var(--c-ink) }
.nav-link.active { color: var(--c-primary-dark) }
.nav-item { display: flex; align-items: center }

/* ---------- progress ---------- */
.progress { display: flex; height: .6rem; background: #EEF0F2; border-radius: 999px; overflow: hidden }
.progress-bar { display: flex; flex-direction: column; justify-content: center; background: var(--c-primary); color: #fff; font-size: .6rem; text-align: center; white-space: nowrap; transition: width .3s }

/* ---------- list group ---------- */
.list-group { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-line) }
.list-group-flush { border-radius: 0; border: 0 }
.list-group-item { padding: .6rem .85rem; background: #fff; border-bottom: 1px solid var(--c-line); font-size: .84rem }
.list-group-item:last-child { border-bottom: 0 }

/* ---------- pagination ---------- */
.pagination { display: flex; list-style: none; padding: 0; gap: .25rem }
.page-item { display: flex }
.page-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 .5rem; font-size: .78rem; font-weight: 600;
  color: var(--c-ink); background: #fff; border: 1px solid var(--c-border); border-radius: 8px;
  text-decoration: none; cursor: pointer; transition: background .15s;
}
.pagination-sm .page-link { min-width: 26px; height: 26px; font-size: .7rem }
.page-link:hover { background: #F4F5F7 }
.page-item.active .page-link { background: var(--c-primary); border-color: var(--c-primary); color: #fff }
.page-item.disabled .page-link { opacity: .45; pointer-events: none }