@import url("./staffReleases.css");


.staff-page-layout {
    box-sizing: border-box;
    flex-direction: row;
    display: flex;
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
}
.staff-shell,
.staff-content {
    box-sizing: border-box;
    background: rgba(201, 233, 74, 0.08);
    border-radius: 14px;
    border: 1px solid rgba(201, 233, 74, 0.2);
    color: #f6f9ff;
    padding: 1.5rem;
    display: flex; /* key */
    flex-direction: column; /* key */
    min-height: 0;
    min-width: 0;
    width: 100%;
}

@media (max-width: 900px) {
    .staff-page-layout {
        flex-direction: column;
        gap: 1rem;
    }

    .area-ib-staff .staff-page-layout > .staff-sidebar {
        width: auto;
        margin-right: 0;
    }
}
.staff-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

    .staff-header h1 {
        margin: 0;
    }

    .staff-header p {
        margin: .35rem 0 0;
        color: rgba(246, 249, 255, 0.82);
    }


.btn-primary,
.btn-ghost {
    border-radius: 10px;
    border: 1px solid rgba(201, 233, 74, 0.25);
    padding: .45rem .8rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary {
    background: rgba(201, 233, 74, 0.22);
    color: #f9ffcf;
}

.btn-ghost {
    background: rgba(7, 18, 28, 0.5);
    color: #f6f9ff;
}

.modal-grid option {
    background: #0f1d2b;
}

/* Shared controls for the Pricing shell and its nested/customer workspaces. */
.pricing-workspace-ui .primary, .pricing-workspace-ui .secondary, .pricing-workspace-ui .danger {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    box-sizing: border-box; border: 0; border-radius: 999px; min-height: 2.25rem;
    padding: .5rem .9rem; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; text-decoration: none;
}
.pricing-workspace-ui .primary { background: #c9e94a; color: #0f2141; }
.pricing-workspace-ui .secondary { background: #455050; color: #fff; }
.pricing-workspace-ui .secondary:hover { background: #536161; }
.pricing-workspace-ui .danger { background: #952e38; color: #fff; }
.pricing-workspace-ui button:disabled { opacity: .55; cursor: default; }
.pricing-workspace-ui button:focus-visible, .pricing-workspace-ui input:focus-visible, .pricing-workspace-ui select:focus-visible { outline: 2px solid #c9e94a; outline-offset: 2px; }
.pricing-workspace-ui .workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.pricing-workspace-ui .workspace-heading h2 { margin: 0; font-size: 1.35rem; }
.pricing-workspace-ui .workspace-heading p { color: #c0ccd1; margin: .45rem 0 0; font-size: .88rem; }
.pricing-workspace-ui .workspace-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1rem 0; }
.pricing-workspace-ui .workspace-table-wrap { border: 1px solid #3c494d; border-radius: 9px; overflow: auto; max-width: 100%; }
.pricing-workspace-ui .workspace-table { border-collapse: collapse; width: 100%; background: #1c2527; font-size: .82rem; }
.pricing-workspace-ui .workspace-table th, .pricing-workspace-ui .workspace-table td { padding: .75rem .6rem; text-align: left; border-bottom: 1px solid #3c494d; vertical-align: top; }
.pricing-workspace-ui .workspace-table th { background: #142023; color: #d0dadd; font-size: .76rem; }
.pricing-workspace-ui .workspace-table tbody tr:nth-child(even) { background: #202b2e; }
.pricing-workspace-ui .workspace-table tbody tr:hover { background: #2a3838; }
.pricing-workspace-ui .workspace-table small { display: block; color: #b4c3ca; font-size: .75rem; margin-top: .3rem; }
.pricing-workspace-ui .workspace-table a { color: #d7ec71; text-decoration: none; }
.pricing-workspace-ui .workspace-table a:hover { text-decoration: underline; }
.pricing-workspace-ui .workspace-table .amount { text-align: right; font-variant-numeric: tabular-nums; }
.pricing-workspace-ui .sort-header { display: inline-flex; align-items: center; justify-content: space-between; gap: .3rem; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.pricing-workspace-ui .sort-header span { color: #c9e94a; }
.pricing-workspace-ui .workspace-badge { display: inline-block; padding: .2rem .5rem; border-radius: 999px; background: #394548; color: #e0e9ed; font-size: .73rem; }
.pricing-workspace-ui .workspace-badge.active { background: #34492b; color: #dcf4b5; }
.pricing-workspace-ui .workspace-badge.trial { background: #3b435c; color: #dee3ff; }
.pricing-workspace-ui .attention-count { color: #e5c88b; cursor: pointer; white-space: nowrap; }
.pricing-workspace-ui .staff-status.error { color: #fecaca; }
@media(max-width:700px) {
    .pricing-workspace-ui .workspace-heading { flex-direction: column; }
    .pricing-workspace-ui .workspace-table { min-width: 730px; }
}

.pricing-workspace-ui .workspace-heading > button { flex-shrink:0; white-space:nowrap; }

/* New workspaces opt in. Tasks, Calendar, Timesheets and capture panels keep their own styles. */
.area-ib-staff .staff-app-content .staff-page-layout { grid-template-columns:minmax(0,1fr); }
.area-ib-staff .staff-content.staff-workspace { background:transparent; border:0; border-radius:0; padding:0; color:#f6f9ff; font-size:16px; line-height:1.5; gap:24px; }
.area-ib-staff .staff-workspace .staff-header { margin:0; padding:0 0 20px; border-bottom:1px solid #334454; align-items:center; }
.area-ib-staff .staff-content.staff-workspace h1 { font-size:28px; letter-spacing:-.025em; line-height:1.2; }
.area-ib-staff .staff-content.staff-workspace h2:not(.task-modal *, .customer-pricing-card *) { font-size:20px; line-height:1.3; }
.area-ib-staff .staff-content.staff-workspace h3:not(.task-modal *, .customer-pricing-card *) { font-size:17px; line-height:1.4; }
.area-ib-staff .staff-content.staff-workspace :is(.subtitle,.card-subtitle,.field-note,.empty-note):not(.task-modal *, .customer-pricing-card *) { color:#b8c6d4; font-size:14px; line-height:1.5; }
.area-ib-staff .staff-content.staff-workspace :is(.card,.staff-panel,.table-panel,.finance-panel,.settings-panel,.compliance-panel):not(.task-modal *, .customer-pricing-card, .customer-pricing-card *) { background:#14202b; border:1px solid #334454; border-radius:10px; padding:24px; min-width:0; box-shadow:none; }
.area-ib-staff .staff-content.staff-workspace table:not(.task-modal *, .customer-pricing-card *) { width:100%; border-collapse:collapse; font-size:14px; background:#14202b; }
.area-ib-staff .staff-content.staff-workspace :is(th,td):not(.task-modal *, .customer-pricing-card *) { padding:12px 16px; border-bottom:1px solid #334454; vertical-align:middle; font-size:14px; line-height:1.5; }
.area-ib-staff .staff-content.staff-workspace th:not(.task-modal *, .customer-pricing-card *) { background:#1b2b39; color:#bdcbd8; font-weight:600; text-transform:none; letter-spacing:0; }
.area-ib-staff .staff-content.staff-workspace tbody tr:hover:not(.task-modal *, .customer-pricing-card *) { background:#203140; }
.area-ib-staff .staff-content.staff-workspace :is(td,th).amount { text-align:right; font-variant-numeric:tabular-nums; }
.area-ib-staff .staff-content.staff-workspace :is(input,select,textarea):not([type=checkbox],[type=radio],[type=file],.task-modal *, .customer-pricing-card *) { background:#101c28; border:1px solid #506273; border-radius:6px; padding:9px 12px; color:#f6f9ff; font:inherit; min-height:40px; box-sizing:border-box; max-width:100%; }
.area-ib-staff .staff-content.staff-workspace :is(button,a.primary,a.secondary):not(.task-modal *, .customer-pricing-card *, .sort-header, .uptime-bar) { min-height:40px; font-size:14px; padding:8px 14px; border-radius:7px; }
.area-ib-staff .staff-content.staff-workspace :is(button,input,select,textarea,a):not(.task-modal *, .customer-pricing-card *):focus-visible { outline:2px solid #c9e94a; outline-offset:3px; }
.area-ib-staff .staff-content.staff-workspace :is(.table-wrapper,.table-wrap,.workspace-table-wrap,.staff-table-scroll) { max-width:100%; min-width:0; overflow:auto; }
.area-ib-staff .staff-workspace .customer-tabs { margin:0; gap:6px; flex-wrap:wrap; border-bottom:1px solid #334454; padding-bottom:12px; }
.staff-page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding-bottom:20px; border-bottom:1px solid #334454; }
.staff-page-heading h1 { margin:4px 0 8px; }
.staff-page-heading p { color:#b8c6d4; margin:0; }
.staff-breadcrumb { color:#bdcfdd; font-size:14px; text-decoration:none; }
.staff-heading-actions,.staff-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.staff-toolbar label { display:grid; gap:6px; font-size:14px; color:#bdcbd8; }
.staff-toolbar input[type=search] { width:360px; }
.staff-toolbar .staff-result-count { margin-left:auto; color:#b8c6d4; font-size:14px; }
.staff-view-tabs { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 12px; border-bottom:1px solid #334454; }
.staff-view-tabs a,.staff-view-tabs button { color:#c4d1de; text-decoration:none; background:transparent; border:1px solid transparent; border-radius:6px; padding:9px 14px; }
.staff-view-tabs [aria-current=page],.staff-view-tabs .active { color:#ddf599; background:#283623; border-color:#566b38; }
.staff-primary,.staff-secondary,.staff-danger,.staff-close { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; min-height:40px; gap:8px; border:1px solid transparent; border-radius:7px; padding:9px 16px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; }
.staff-primary { color:#15200b; background:#c9e94a; }
.staff-secondary { color:#f0f5fa; background:#263747; border-color:#4a5d6f; }
.staff-danger { background:#822f3a; color:#fff; border-color:#c5747e; }
.staff-close { background:transparent; color:#cbd9e6; font-size:26px; padding:0; width:40px; }
.staff-primary:disabled,.staff-secondary:disabled,.staff-danger:disabled { opacity:.5; cursor:default; }
.staff-card { padding:24px; border:1px solid #334454; border-radius:10px; background:#14202b; min-width:0; }
.staff-card h2,.staff-card h3 { margin:0 0 16px; }
.staff-card-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.staff-card-heading h2 { margin:0; }
.staff-two-columns { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:24px; }
.staff-record-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px 28px; margin:0; }
.staff-record-facts dt { color:#acbdcd; font-size:14px; margin-bottom:6px; }
.staff-record-facts dd { color:#f1f6fb; margin:0; overflow-wrap:anywhere; }
.staff-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.staff-form-grid .full { grid-column:1/-1; }
.staff-form-grid .wide { grid-column:1/-1; }
.staff-form-grid label,.staff-editor label { display:grid; gap:8px; font-size:14px; font-weight:600; }
.staff-form-grid small,.staff-editor small { font-weight:400; color:#b8c6d4; font-size:14px; }
.staff-editor { max-width:1040px; display:grid; gap:24px; }
.staff-editor-wide { max-width:none; }
.staff-dialog .entry-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.staff-inline-notice { padding:14px 18px; border:1px solid #496276; border-radius:7px; background:#1a2c3c; }
.staff-inline-notice.error { background:#38202a; border-color:#a76370; color:#ffccd3; }
.staff-form-actions { display:flex; gap:12px; align-items:center; width:100%; justify-content:flex-end; }
.staff-form-state { margin-right:auto; font-size:14px; color:#c3d0dc; }
.staff-save-bar { position:sticky; bottom:0; background:#172634; border-top:1px solid #425667; padding:16px 24px; z-index:5; }
.staff-modal-backdrop { position:fixed; inset:0; background:rgba(3,9,15,.78); z-index:1200; display:grid; place-items:center; padding:24px; }
.staff-dialog { display:flex; flex-direction:column; width:min(800px,100%); max-height:calc(100dvh - 48px); background:#14202d; color:#f6f9ff; border:1px solid #4a5e72; border-radius:12px; box-shadow:0 24px 80px #0008; min-height:0; }
.staff-dialog.wide { width:min(1120px,100%); }
.staff-dialog-header { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; gap:16px; border-bottom:1px solid #334454; flex-shrink:0; }
.staff-dialog-header h2 { margin:0; font-size:22px; }
.staff-dialog-body { padding:24px; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
.staff-dialog-footer { display:flex; justify-content:flex-end; gap:12px; padding:16px 24px; border-top:1px solid #334454; flex-shrink:0; }
.staff-dialog :is(input,select,textarea):not([type=checkbox],[type=radio]) { width:100%; min-height:40px; box-sizing:border-box; background:#0e1924; color:#f6f9ff; border:1px solid #506273; border-radius:6px; padding:9px 12px; font:inherit; }
.staff-dialog label { display:grid; gap:7px; margin-bottom:16px; font-size:14px; font-weight:600; }
.staff-dialog :is(input,select,textarea,button,a):focus-visible { outline:2px solid #c9e94a; outline-offset:2px; }
.staff-dialog [role=alert] { margin-bottom:20px; }
.staff-directory-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.staff-directory-grid ul { list-style:none; padding:0; margin:0; }
.staff-directory-grid a { display:block; padding:14px 0; color:#dcedac; border-top:1px solid #334454; text-decoration:none; }
@media(max-width:1000px) { .staff-two-columns { grid-template-columns:1fr; } .staff-page-heading { flex-wrap:wrap; } }
@media(max-width:650px) { .staff-form-grid { grid-template-columns:1fr; } .staff-toolbar input[type=search] { width:100%; } .staff-modal-backdrop { padding:8px; } .staff-dialog { max-height:calc(100dvh - 16px); } .staff-dialog-body { padding:16px; } .staff-directory-grid { grid-template-columns:1fr; } }

/* Shared controls also appear in editors outside the page's content element. */
.staff-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; min-height:40px; padding:9px 16px; border:1px solid #4a5d6f; border-radius:7px; background:#263747; color:#f0f5fa; font:inherit; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; }
.staff-button.primary { background:#c9e94a; color:#15200b; border-color:#c9e94a; }
.staff-button.danger { background:#822f3a; color:#fff; border-color:#c5747e; }
.staff-button:disabled { opacity:.5; cursor:default; }
.staff-button:focus-visible,.staff-link:focus-visible { outline:2px solid #c9e94a; outline-offset:3px; }
.area-ib-staff .staff-workspace a:not(.task-modal *, .customer-pricing-card *, .staff-button.primary, .primary, .uptime-popover *) { color:#d7ed91; }
.area-ib-staff .staff-workspace .staff-link { background:none; border:0; color:#d7ed91; text-align:left; text-decoration:underline; padding:0; }
.staff-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; padding-bottom:12px; border-bottom:1px solid #334454; }
.staff-tabs a { padding:9px 14px; border:1px solid transparent; border-radius:6px; text-decoration:none; }
.staff-tabs a.active { color:#ddf599; background:#283623; border-color:#566b38; }
.staff-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px 28px; margin:0; }
.staff-facts dt,.staff-muted { color:#b8c6d4; font-size:14px; }
.staff-facts dd { margin:4px 0 0; overflow-wrap:anywhere; }
.staff-badge { display:inline-block; border:1px solid #536842; background:#273621; color:#e2f3b6; font-size:14px; padding:3px 9px; border-radius:6px; }
.staff-prose { max-width:85ch; white-space:pre-wrap; overflow-wrap:anywhere; }
.staff-row-menu { display:inline-block; margin:8px; }
.staff-row-menu[open] { display:grid; gap:8px; }
.staff-row-menu summary { cursor:pointer; color:#c5d3df; }
.area-ib-staff .staff-workspace .staff-single-column { display:block; }
.staff-dialog :is(.cycle-edit-grid,.modal-grid,.collector-form) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.staff-dialog :is(.wide,.modal-wide) { grid-column:1/-1; }
.staff-dialog table { width:100%; font-size:14px; }
.staff-dialog :is(th,td) { padding:12px; vertical-align:top; border-bottom:1px solid #334454; }
.staff-dialog .table-wrapper { overflow:auto; }
.staff-dialog .inline-form { display:grid; gap:12px; }
@media(max-width:650px) { .staff-dialog :is(.cycle-edit-grid,.modal-grid,.collector-form) { grid-template-columns:1fr; } }
.staff-editor-fields { display:contents; border:0; padding:0; margin:0; min-width:0; } .staff-dialog { font-size:16px; line-height:1.5; } .staff-dialog .fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .staff-dialog button { min-height:40px; } @media(max-width:650px) { .staff-dialog .fields {grid-template-columns:1fr;} }
.staff-file-preview img { display: block; max-width: 100%; max-height: 70vh; margin: auto; object-fit: contain; }
.staff-file-preview iframe { width: 100%; min-height: 65vh; border: 0; }
.area-ib-staff .staff-workspace .lifecycle-panel { display:flex; flex-wrap:wrap; gap:8px; }
.area-ib-staff .staff-workspace .lifecycle-step { border-radius:5px; padding:5px 12px; font-size:14px; font-weight:500; }
.area-ib-staff .staff-workspace td > :is(.quote-title,.site-subtitle) { display:block; color:#b8c6d4; margin-top:4px; }
.area-ib-staff .staff-workspace .facts-card { align-self:start; }