/* Developer Console dashboard. Built on the shared RuangKerja V2 tokens. */
.developer-v2-page { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: var(--maya-v2-bg); color: var(--maya-v2-text); }
.developer-v2-toolbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; padding: 16px 28px; border-bottom: 1px solid var(--maya-v2-border); background: var(--maya-v2-surface); }
.developer-v2-title-group, .developer-v2-toolbar-actions, .developer-v2-metric-card, .developer-v2-quick-action, .developer-v2-list-row { display: flex; align-items: center; }
.developer-v2-title-group { min-width: 0; gap: 13px; }
.developer-v2-title-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #7563ed, #5140c5); box-shadow: 0 8px 18px rgba(92, 74, 210, .24); font-size: 17px; }
.developer-v2-eyebrow { margin-bottom: 3px; color: #8b7df0; font-size: 10px; font-weight: 700; letter-spacing: .1em; line-height: 1; }
.developer-v2-title-group h1 { margin: 0; color: #26344c; font-size: 20px; font-weight: 700; line-height: 1.2; }
.developer-v2-title-group p { margin: 4px 0 0; color: var(--maya-v2-muted); font-size: 12px; }
.developer-v2-toolbar-actions { flex: 0 0 auto; gap: 8px; }
.developer-v2-toolbar-actions .btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 7px; font-size: 12px; font-weight: 600; line-height: 34px; }
.developer-v2-icon-button { width: 34px; height: 34px; padding: 0; border: 1px solid #e1e6ee; border-radius: 7px; color: #6b778a; background: #fff; cursor: pointer; }
.developer-v2-icon-button:hover { color: #5a48d0; border-color: #d9d3fa; background: #f6f4ff; }
.developer-v2-secondary-button { border: 1px solid #dfe4ed; color: #4d5b70; background: #fff; }
.developer-v2-secondary-button:hover { color: #5140c5; border-color: #d8d1fb; background: #faf9ff; }
.developer-v2-primary-button { border: 1px solid #5d4bd4; color: #fff; background: #6452db; box-shadow: 0 5px 10px rgba(90, 72, 208, .17); }
.developer-v2-primary-button:hover { color: #fff; background: #5542cf; }
.developer-v2-content { flex: 1 1 auto; min-height: 0; padding: 24px 28px 32px; overflow: auto; }
.developer-v2-alert { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 10px 13px; border: 1px solid #f3d6a3; border-radius: 8px; color: #8a5e12; background: #fff8e9; font-size: 12px; }
.developer-v2-alert button { margin-left: auto; padding: 0; border: 0; color: inherit; background: transparent; font-weight: 700; cursor: pointer; }
.developer-v2-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.developer-v2-metric-card { position: relative; min-width: 0; min-height: 124px; gap: 12px; padding: 17px; overflow: hidden; border: 1px solid var(--maya-v2-border); border-radius: 10px; background: #fff; box-shadow: 0 2px 7px rgba(26, 38, 58, .035); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
a.developer-v2-metric-card:hover { border-color: #d7d1f7; box-shadow: 0 8px 20px rgba(44, 37, 88, .09); transform: translateY(-1px); }
.developer-v2-metric-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 10px; font-size: 15px; }
.is-projects .developer-v2-metric-icon { color: #6955dc; background: #f1efff; }.is-applications .developer-v2-metric-icon { color: #2975b8; background: #ebf5ff; }.is-client .developer-v2-metric-icon { color: #d18b2e; background: #fff6e9; }.is-workspace .developer-v2-metric-icon { color: #25816d; background: #eaf8f4; }
.developer-v2-metric-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }.developer-v2-metric-copy > span { overflow: hidden; color: #7b8798; font-size: 11px; font-weight: 600; letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; }.developer-v2-metric-copy strong { margin: 5px 0 2px; color: #2d3950; font-size: 25px; font-weight: 700; line-height: 1; }.developer-v2-metric-copy small { overflow: hidden; color: #a0a9b7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.developer-v2-card-arrow { position: absolute; right: 15px; bottom: 14px; color: #9c92e5; font-size: 11px; }
.developer-v2-section { margin-top: 25px; }.developer-v2-section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 11px; }.developer-v2-section h2, .developer-v2-panel-heading h2 { margin: 0; color: #344157; font-size: 14px; font-weight: 700; }.developer-v2-section p, .developer-v2-panel-heading p { margin: 4px 0 0; color: #8b96a6; font-size: 11px; }
.developer-v2-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.developer-v2-quick-action { min-width: 0; gap: 11px; padding: 14px; border: 1px solid #e4e8ef; border-radius: 9px; color: inherit; background: #fff; transition: background .16s ease, border-color .16s ease; }.developer-v2-quick-action:hover { border-color: #d8d1f8; color: inherit; background: #fbfaff; }.developer-v2-quick-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 9px; font-size: 13px; }.developer-v2-quick-icon.is-purple { color: #6d59db; background: #f0eeff; }.developer-v2-quick-icon.is-blue { color: #2277bb; background: #e9f4ff; }.developer-v2-quick-icon.is-amber { color: #c18228; background: #fff3df; }.developer-v2-quick-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }.developer-v2-quick-copy strong { overflow: hidden; color: #435069; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.developer-v2-quick-copy small { margin-top: 3px; overflow: hidden; color: #919baa; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.developer-v2-quick-action > .fa { color: #a1aaba; font-size: 10px; }
.developer-v2-activity-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 25px; }.developer-v2-panel { min-width: 0; overflow: hidden; border: 1px solid var(--maya-v2-border); border-radius: 10px; background: #fff; box-shadow: 0 2px 7px rgba(26, 38, 58, .025); }.developer-v2-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 17px 14px; border-bottom: 1px solid #edf0f4; }.developer-v2-panel-heading > a { flex: 0 0 auto; margin-top: 2px; color: #6352d6; font-size: 11px; font-weight: 650; white-space: nowrap; }.developer-v2-panel-heading > a i { margin-left: 3px; font-size: 9px; }
.developer-v2-list { min-height: 192px; }.developer-v2-list-row { min-height: 57px; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #f0f2f5; color: inherit; }.developer-v2-list-row:last-child { border-bottom: 0; }.developer-v2-list-row:hover { color: inherit; background: #fbfbfe; }.developer-v2-avatar, .developer-v2-app-icon { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: #6551d4; background: #f0eeff; font-size: 10px; font-weight: 700; }.developer-v2-app-icon { color: #347ab5; background: #ebf5fd; font-size: 14px; }.developer-v2-app-icon.is-mobile { color: #287b68; background: #eaf7f3; }.developer-v2-list-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }.developer-v2-list-main strong { overflow: hidden; color: #47546a; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.developer-v2-list-main small { margin-top: 2px; overflow: hidden; color: #9aa3b1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.developer-v2-list-meta { flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; color: #857725; background: #fff8de; font-size: 9px; font-weight: 650; }.developer-v2-status { flex: 0 0 auto; padding: 3px 6px; border-radius: 5px; color: #29745c; background: #e8f7f0; font-size: 9px; font-weight: 700; line-height: 1; text-transform: capitalize; }.developer-v2-status.is-inactive { color: #7f8998; background: #edf0f4; }.developer-v2-list-row > .fa { color: #b1b8c3; font-size: 10px; }.developer-v2-loading-row { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 192px; color: #929cab; font-size: 11px; }.developer-v2-empty-state { display: flex; align-items: center; min-height: 192px; flex-direction: column; justify-content: center; padding: 24px; color: #8792a1; text-align: center; }.developer-v2-empty-state > span { display: grid; width: 36px; height: 36px; margin-bottom: 9px; place-items: center; border-radius: 10px; color: #887ce3; background: #f2f0ff; font-size: 14px; }.developer-v2-empty-state strong { color: #606c7f; font-size: 12px; }.developer-v2-empty-state small { max-width: 260px; margin: 4px 0 10px; font-size: 10px; line-height: 1.45; }.developer-v2-empty-state a { color: #6250d2; font-size: 11px; font-weight: 650; }
@media (max-width: 1100px) { .developer-v2-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .developer-v2-page { height: auto; min-height: 100%; overflow: visible; }.developer-v2-toolbar { align-items: flex-start; flex-direction: column; min-height: 0; padding: 16px; }.developer-v2-toolbar-actions { width: 100%; }.developer-v2-toolbar-actions .developer-v2-primary-button { margin-left: auto; }.developer-v2-content { padding: 16px; overflow: visible; }.developer-v2-metrics, .developer-v2-quick-actions, .developer-v2-activity-grid { grid-template-columns: 1fr; }.developer-v2-section { margin-top: 20px; }.developer-v2-activity-grid { margin-top: 20px; } }
@media (max-width: 430px) { .developer-v2-title-group p, .developer-v2-secondary-button span { display: none; }.developer-v2-toolbar-actions .btn { width: 34px; justify-content: center; padding: 0; }.developer-v2-metrics { grid-template-columns: 1fr; } }

/* Applications list */
/* Developer routes have two nested UI-Router outlets before the list template.
   Those wrappers need a flex height or the list body collapses below its toolbar. */
#content:has(.developer-v2-app-list) > .ng-scope > .ng-scope,
#content:has(.developer-v2-app-list) > .ng-scope > .ng-scope > .ng-scope { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
#content:has(.developer-v2-app-list) .developer-v2-app-list { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.developer-v2-app-list .maya-v2-list-layout { display: flex; flex: 1 1 0; width: 100%; min-height: 0; }
.developer-v2-app-list .maya-v2-list-table-panel { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }
.developer-v2-app-list .maya-v2-list-table-scroll { display: block; flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto; }
.developer-v2-app-list .maya-v2-list-toolbar-left strong { color: #25324a; font-size: 17px; font-weight: 700; }
.developer-v2-app-table { min-width: 1020px; margin-bottom: 0; color: #425069; font-size: 12px; }
.developer-v2-app-table > thead > tr > th { height: 43px; padding: 0 14px; border-bottom: 1px solid #e7ebf1; color: #7e8999; background: #fbfcfe; font-size: 10px; font-weight: 700; letter-spacing: .045em; line-height: 43px; text-transform: uppercase; white-space: nowrap; }
.developer-v2-app-table > thead > tr > th a { color: inherit; cursor: pointer; }.developer-v2-app-table > thead > tr > th a:hover { color: #5c4bcc; }
.developer-v2-app-table > tbody > tr > td { padding: 12px 14px; border-top-color: #edf0f4; vertical-align: middle; }.developer-v2-app-table > tbody > tr:hover > td { background: #fbfbfe; }
.developer-v2-app-name { display: flex; align-items: center; gap: 10px; min-width: 190px; }.developer-v2-app-symbol { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 8px; color: #3379b5; background: #eaf4fc; font-size: 13px; }.developer-v2-app-name > div, .developer-v2-project { min-width: 0; }.developer-v2-app-name strong, .developer-v2-project strong { display: block; overflow: hidden; color: #394861; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.developer-v2-app-name small, .developer-v2-project small { display: block; max-width: 180px; margin-top: 3px; overflow: hidden; color: #99a3b1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.developer-v2-type-badge, .developer-v2-platform, .developer-v2-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; line-height: 1; text-transform: capitalize; }.developer-v2-type-badge { color: #a36c1b; background: #fff5e3; }.developer-v2-type-badge.is-workspace { color: #6652d6; background: #f0eeff; }.developer-v2-platform { color: #55718b; background: #f1f5f8; font-weight: 600; }.developer-v2-platform .fa { font-size: 11px; }.developer-v2-identifier { padding: 3px 5px; border-radius: 4px; color: #64748b; background: #f2f4f7; font-size: 10px; }.developer-v2-date { color: #8792a1; font-size: 11px; white-space: nowrap; }
.developer-v2-row-actions { display: inline-flex; gap: 5px; }.developer-v2-row-actions button { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 1px solid #e2e7ee; border-radius: 6px; color: #64748b; background: #fff; cursor: pointer; }.developer-v2-row-actions button:hover { border-color: #d6d0f6; color: #5947c9; background: #f4f2ff; }.developer-v2-row-actions button:last-child:hover { border-color: #f2d4d4; color: #be4d4d; background: #fff4f4; }
.developer-v2-app-loading { height: 220px; color: #8d98a8; text-align: center; }.developer-v2-app-loading .fa { margin-right: 6px; color: #7360e5; }.developer-v2-app-empty { display: flex; align-items: center; min-height: 230px; flex-direction: column; justify-content: center; padding: 25px; color: #8a95a4; text-align: center; }.developer-v2-app-empty > span { display: grid; width: 38px; height: 38px; margin-bottom: 9px; place-items: center; border-radius: 10px; color: #7563e4; background: #f1efff; }.developer-v2-app-empty strong { color: #57647a; font-size: 13px; }.developer-v2-app-empty small { margin: 4px 0 11px; font-size: 11px; }.developer-v2-app-empty button { padding: 6px 10px; border: 1px solid #ded9fa; border-radius: 6px; color: #5e4bce; background: #faf9ff; font-size: 11px; font-weight: 650; cursor: pointer; }
@media (max-width: 760px) { .developer-v2-app-list .maya-v2-list-toolbar { min-height: 60px; padding: 0 12px; }.developer-v2-app-list .maya-v2-list-toolbar-left { gap: 6px; }.developer-v2-app-list .maya-v2-list-toolbar-left strong { font-size: 16px; }.developer-v2-app-table > thead > tr > th, .developer-v2-app-table > tbody > tr > td { padding-right: 11px; padding-left: 11px; } }

/* Application form */
.developer-app-form-v2 .maya-v2-form-column { width: min(100%, 980px) !important; max-width: 980px !important; }
.developer-app-form-v2 .maya-v2-form-card { overflow: visible; }
.developer-app-form-v2 .maya-v2-form-heading { min-height: 58px; }
.developer-app-form-v2 .maya-v2-form-heading-actions .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; border-radius: 7px; font-size: 11px; font-weight: 650; }
.developer-app-form-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.developer-app-form-title-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 9px; color: #347ab5; background: #eaf4fc; font-size: 14px; }
.developer-app-form-eyebrow { display: block; margin-bottom: 3px; color: #8b7df0; font-size: 9px; font-weight: 750; letter-spacing: .11em; line-height: 1; }
.developer-app-form-title h3 { font-size: 16px; }
.developer-app-form-v2 .maya-v2-form-body { padding: 30px 36px 8px; }
.developer-app-form-v2 .maya-v2-form-body > form > .form-group { margin-bottom: 24px; }
.developer-app-form-v2 .maya-v2-form-body > form > span > .form-group { margin: 0 0 25px; padding: 13px 15px; border: 1px solid #edf0f5; border-radius: 9px; background: #fbfcfe; }
.developer-app-form-v2 .inventory-item-form-section { margin: 0; padding-top: 25px; border-top: 1px solid #edf0f5; }
.developer-app-form-v2 .developer-app-form-section-heading { margin-bottom: 22px; }
.developer-app-form-v2 .inventory-item-form-grid { gap: 20px 24px; }
.developer-app-form-v2 .inventory-item-form-grid > label,
.developer-app-form-v2 .inventory-item-form-grid > .inventory-item-form-wide { gap: 8px; }
.developer-app-form-v2 .inventory-item-form-grid .form-control,
.developer-app-form-v2 .inventory-item-form-grid .ui-select-match > .btn { min-height: 40px; }
.developer-app-form-v2 .inventory-item-form-grid textarea.form-control { min-height: 92px; }
.developer-app-form-v2 .developer-app-form-primary-field { padding: 14px; border: 1px solid #edf0f5; border-radius: 9px; background: #fbfcfe; }
.developer-app-form-v2 .developer-app-form-primary-field .form-control { background: #fff; }
.developer-app-form-v2 .developer-app-form-primary-field > label { margin: 0; }
.developer-app-form-v2 .developer-app-form-select-field .ui-select-match > .btn { background: #fff; }
.developer-app-form-v2 .developer-app-form-secondary-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; min-width: 0; }
.developer-app-form-v2 .developer-app-form-secondary-grid > label { display: flex; min-width: 0; flex-direction: column; gap: 8px; margin: 0; color: #536176; font-size: 11px; font-weight: 600; }
.developer-app-form-v2 .developer-app-key-field { margin-top: 3px; padding: 18px 14px 14px; border: 1px solid #e4e8f2; border-radius: 9px; background: #fbfcff; }
.developer-app-form-v2 .developer-app-key-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; color: #536176; font-size: 11px; font-weight: 650; }
.developer-app-form-v2 .developer-app-key-heading small { color: #8994a5; font-size: 10px; font-weight: 400; }
.developer-app-form-v2 .developer-app-key-field .form-control { border-color: #d9def0; color: #5960a0; background: #f7f8ff; font-family: Menlo, Monaco, Consolas, monospace; letter-spacing: .025em; }
.developer-app-form-v2 .developer-app-key-heading small { display: flex; align-items: center; gap: 5px; }
.developer-app-form-v2 .developer-app-key-heading small .fa { color: #7b72d9; }
.developer-app-form-v2 .maya-v2-form-actions { justify-content: flex-end; margin: 30px -36px 0; padding: 18px 36px 22px; background: #fcfcfe; }
.developer-app-form-v2 .maya-v2-form-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 118px; min-height: 38px; border-radius: 7px; font-size: 11px; font-weight: 650; }
.developer-app-form-v2 .maya-v2-form-save-button { border-color: #5d4bd4; background: #6452db; box-shadow: 0 5px 10px rgba(90, 72, 208, .16); }
.developer-app-form-v2 .maya-v2-form-save-button:hover { border-color: #5542cf; background: #5542cf; }
@media (max-width: 760px) { .developer-app-form-v2 .maya-v2-form-body { padding: 22px 18px 5px; }.developer-app-form-v2 .maya-v2-form-heading-actions .maya-v2-form-back-button { display: none; }.developer-app-form-v2 .maya-v2-form-heading-actions .maya-v2-form-save-button { min-width: 0; padding: 0 10px; }.developer-app-form-v2 .developer-app-form-secondary-grid { grid-template-columns: 1fr; gap: 14px; }.developer-app-form-v2 .developer-app-key-heading { align-items: flex-start; flex-direction: column; gap: 4px; }.developer-app-form-v2 .maya-v2-form-actions { margin-right: -18px; margin-left: -18px; padding-right: 18px; padding-left: 18px; }.developer-app-form-v2 .maya-v2-form-actions .btn { flex: 1; } }

/* Projects list */
#content:has(.developer-v2-project-list) > .ng-scope > .ng-scope,
#content:has(.developer-v2-project-list) > .ng-scope > .ng-scope > .ng-scope { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
#content:has(.developer-v2-project-list) .developer-v2-project-list { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.developer-v2-project-list .maya-v2-list-layout { display: flex; flex: 1 1 0; width: 100%; min-height: 0; }.developer-v2-project-list .maya-v2-list-table-panel { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }.developer-v2-project-list .maya-v2-list-table-scroll { display: block; flex: 1 1 0; min-width: 0; min-height: 0; overflow: auto; }.developer-v2-project-list .maya-v2-list-toolbar-left strong { color: #25324a; font-size: 17px; font-weight: 700; }
.developer-v2-project-table { min-width: 880px; margin-bottom: 0; color: #425069; font-size: 12px; }.developer-v2-project-table > thead > tr > th { height: 43px; padding: 0 14px; border-bottom: 1px solid #e7ebf1; color: #7e8999; background: #fbfcfe; font-size: 10px; font-weight: 700; letter-spacing: .045em; line-height: 43px; text-transform: uppercase; white-space: nowrap; }.developer-v2-project-table > thead > tr > th a { color: inherit; cursor: pointer; }.developer-v2-project-table > tbody > tr > td { padding: 12px 14px; border-top-color: #edf0f4; vertical-align: middle; }.developer-v2-project-table > tbody > tr:hover > td { background: #fbfbfe; }
.developer-v2-project-name { display: flex; align-items: center; gap: 10px; min-width: 220px; }.developer-v2-project-symbol { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #6955dc; background: #f0eeff; font-size: 13px; }.developer-v2-project-name > div, .developer-v2-project-domain, .developer-v2-project-theme { min-width: 0; }.developer-v2-project-name strong, .developer-v2-project-theme strong { display: block; overflow: hidden; color: #394861; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.developer-v2-project-name small, .developer-v2-project-domain small, .developer-v2-project-theme small { display: block; max-width: 210px; margin-top: 3px; overflow: hidden; color: #99a3b1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.developer-v2-project-domain > a { color: #5f4ecf; font-size: 12px; font-weight: 600; }.developer-v2-project-domain > span { color: #8d98a8; font-size: 11px; }