/*
 * The workspace, re-tinted to match the marketplace.
 *
 * The admin side is a bought Bootstrap theme across ~200 Blade files. Rewriting
 * those would be weeks of work for no functional gain, so this is an overlay:
 * the same tokens as public/css/naija-market.css, applied to the theme's own
 * class names. Load it LAST so it wins on specificity ties.
 *
 * The point is that a landlord moving between the public listing page and their
 * own dashboard should not feel like they changed product.
 */

:root,
body {
    --nm-teal: #0b5c56;
    --nm-teal-deep: #084a45;
    --nm-green: #1b8a4b;
    --nm-green-dark: #14713c;
    --nm-green-soft: #e6f4ec;
    --nm-ink: #10151a;
    --nm-muted: #6b7280;
    --nm-line: #e6e9ec;

    /* Bootstrap's primary drives buttons, links, badges and focus rings. */
    --bs-primary: #1b8a4b;
    --bs-primary-rgb: 27, 138, 75;
    --bs-primary-text-emphasis: #0f5c31;
    --bs-primary-bg-subtle: #e6f4ec;
    --bs-primary-border-subtle: #a9dcc0;
    --bs-link-color: #14713c;
    --bs-link-color-rgb: 20, 113, 60;
    --bs-link-hover-color: #0f5c31;

    --pc-sidebar-background: #0b5c56;
    --pc-sidebar-color: #d7e7e5;
    --pc-sidebar-color-rgb: 215, 231, 229;
    --pc-sidebar-active-color: #ffffff;
    --pc-sidebar-active-color-rgb: 255, 255, 255;
    --pc-sidebar-caption-color: #8fb8b4;
    --pc-sidebar-border: rgba(255, 255, 255, .08);
    --pc-sidebar-submenu-border-color: rgba(255, 255, 255, .16);
    --pc-sidebar-shadow: none;
    --pc-active-background: rgba(255, 255, 255, .12);
    --pc-heading-color: #10151a;
}

body {
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--nm-ink);
    font-size: 15px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------- sidebar */

.pc-sidebar { background: var(--nm-teal); border-right: 0; }
.pc-sidebar .m-header { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pc-sidebar .pc-navbar > .pc-item > .pc-link { color: #d7e7e5; font-weight: 500; }
.pc-sidebar .pc-navbar > .pc-item > .pc-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.pc-sidebar .pc-navbar > .pc-item.active > .pc-link,
.pc-sidebar .pc-navbar > .pc-item.pc-trigger > .pc-link {
    color: #fff; background: rgba(255, 255, 255, .13);
}

.pc-sidebar .pc-submenu .pc-item .pc-link { color: rgba(215, 231, 229, .82); }
.pc-sidebar .pc-submenu .pc-item .pc-link:hover,
.pc-sidebar .pc-submenu .pc-item.active .pc-link { color: #fff; }
.pc-sidebar .pc-caption { color: #8fb8b4; letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; font-weight: 600; }
.pc-sidebar .pc-navbar > .pc-item > .pc-link { font-size: .88rem; padding-top: 9px; padding-bottom: 9px; }
.pc-sidebar .pc-submenu .pc-item .pc-link { font-size: .88rem; }
.pc-sidebar .pc-micon i { color: inherit; }

/* ----------------------------------------------------------------- header */

.pc-header { background: #fff; border-bottom: 1px solid var(--nm-line); box-shadow: none; }
.pc-header .pc-head-link { color: var(--nm-ink); }
.pc-header .pc-head-link:hover { color: var(--nm-green-dark); }

/* ------------------------------------------------------------------ cards */

.card {
    border: 1px solid var(--nm-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 21, 26, .04), 0 8px 24px rgba(16, 21, 26, .05);
}

.card .card-header { border-bottom: 1px solid var(--nm-line); background: transparent; padding: 15px 18px; }
.card .card-header h5 { font-weight: 700; font-size: .94rem; margin-bottom: 2px; color: var(--nm-ink); }
.card .card-header small { font-size: .82rem; line-height: 1.5; display: block; }
.card .card-body { padding: 18px; }

/* The bought theme leaves a lot of air between cards; at this density it reads
   as things being unrelated rather than as breathing room. */
.card { margin-bottom: 18px; }

.page-header h5, .page-header h2, .page-header h3 { font-weight: 700; letter-spacing: -.015em; font-size: 1.18rem; }
.breadcrumb { font-size: .82rem; }
.breadcrumb .breadcrumb-item a { color: var(--nm-green-dark); }

/* ---------------------------------------------------------------- buttons */

.btn { border-radius: 10px; font-weight: 600; font-size: .88rem; padding: 9px 16px; }
.btn-sm { border-radius: 8px; font-size: .82rem; padding: 6px 12px; }

.btn-primary, .btn-success {
    background-color: var(--nm-green); border-color: var(--nm-green); color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: var(--nm-green-dark) !important; border-color: var(--nm-green-dark) !important; color: #fff;
}

.btn-outline-primary, .btn-outline-success { color: var(--nm-green-dark); border-color: var(--nm-green); }

.btn-outline-primary:hover, .btn-outline-success:hover {
    background-color: var(--nm-green); border-color: var(--nm-green); color: #fff;
}

.btn-light { background: #fff; border-color: var(--nm-line); color: var(--nm-ink); }
.btn-dark { background: var(--nm-teal); border-color: var(--nm-teal); }
.btn-dark:hover { background: var(--nm-teal-deep); border-color: var(--nm-teal-deep); }

/* ----------------------------------------------------------------- forms */

.form-control, .form-select, .select2-container--default .select2-selection--single {
    border-radius: 10px; border-color: #cfd6dc; padding: 9px 12px; min-height: 40px;
    font-size: .94rem;
}

.form-control-sm, .form-select-sm { min-height: 34px; padding: 6px 10px; font-size: .88rem; border-radius: 8px; }

/* Spinners on a naira field are noise here too. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.form-control:focus, .form-select:focus {
    border-color: var(--nm-green); box-shadow: 0 0 0 3px rgba(27, 138, 75, .12);
}

.form-label { font-weight: 600; font-size: .82rem; margin-bottom: 5px; }
.form-check-input:checked { background-color: var(--nm-green); border-color: var(--nm-green); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(27, 138, 75, .15); }

/* ---------------------------------------------------------------- tables */

.table > :not(caption) > * > * { padding: 11px 10px; }
.table { font-size: .88rem; }
.table > thead th { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--nm-muted); border-bottom-color: var(--nm-line); white-space: nowrap; }
.table > tbody > tr > td { border-bottom-color: var(--nm-line); vertical-align: middle; }

/* ---------------------------------------------------------------- badges */

.badge { border-radius: 999px; font-weight: 600; padding: .36em .74em; font-size: .75rem; }
.badge.bg-primary, .badge.bg-success { background-color: var(--nm-green) !important; }
.badge.bg-light { background-color: var(--nm-green-soft) !important; color: var(--nm-green-dark) !important; }
.badge.bg-dark { background-color: var(--nm-teal) !important; }

.alert { border-radius: 10px; border: 0; font-size: .88rem; padding: 11px 14px; }
.alert.py-2 { padding: 8px 12px; }
.alert-success { background: var(--nm-green-soft); color: #14603a; }
.alert-info { background: #e8f1f5; color: #1c4a5c; }

/* Naira figures read better with a touch more weight. */
.text-primary { color: var(--nm-green-dark) !important; }
.text-success { color: var(--nm-green-dark) !important; }
a { color: var(--nm-green-dark); }
a:hover { color: var(--nm-teal); }

.page-item.active .page-link { background-color: var(--nm-green); border-color: var(--nm-green); }
.page-link { color: var(--nm-green-dark); }

.nav-tabs .nav-link.active { color: var(--nm-green-dark); border-bottom-color: var(--nm-green); }

/* ------------------------------------------------------------ status chips */

/*
 * The tone is decided once, in statusTone(), and rendered once, in
 * partials/status.blade.php. Colour encodes meaning and nothing else:
 * green worked, amber is waiting on a person, red needs attention now,
 * grey ended without incident.
 */
.nm-status {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.nm-status--good { background: #e6f4ec; color: #14713c; }
.nm-status--warn { background: #fbf2e2; color: #8a6410; }
.nm-status--bad { background: #fbeceb; color: #a8281c; }
.nm-status--neutral { background: #eef1f3; color: #5b656e; }
.nm-status--info { background: #e8f1f5; color: #1c5468; }

/* An unmapped status is a gap in the tone list, and it should look like one
   rather than blending in with "paused". */
.nm-status--unknown {
    background: repeating-linear-gradient(45deg, #f3f0e6, #f3f0e6 5px, #ece7d6 5px, #ece7d6 10px);
    color: #6b5b1f;
    border: 1px dashed #c9b978;
}

/* ------------------------------------------------------------- phone scale */

/*
 * The same move as the marketplace sheet: Bootstrap and the bought theme are
 * rem-based, so one step down at the root shrinks the whole workspace in
 * proportion on a phone, and the targeted rules handle what proportion alone
 * cannot.
 */
@media (max-width: 768px) {
    html { font-size: 14px; }

    .card { margin-bottom: 14px; border-radius: 12px; }
    .card .card-header { padding: 12px 14px; }
    .card .card-body { padding: 14px; }

    .page-header h5, .page-header h2, .page-header h3 { font-size: 1.1rem; }
    .breadcrumb { font-size: .78rem; }

    .btn { padding: 8px 14px; }
}

/* A wide table crushed into a narrow card truncates its last columns — the
 * dashboard's invoice list was cutting "STATUS" to "STAT" even on desktop.
 * Scoped with :has so card bodies holding dropdowns are not given an overflow
 * context that would clip their menus.
 */
.card .card-body:has(> .table),
.card .card-body:has(> table),
.card .card-body:has(> .table-responsive) { overflow-x: auto; }

/* A quiet link back to the public marketplace, so the two halves feel joined. */
.nm-backlink {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; margin-right: 10px;
    border: 1px solid var(--nm-line); border-radius: 999px;
    font-size: .82rem; font-weight: 600; color: var(--nm-green-dark);
    background: #fff; white-space: nowrap; vertical-align: middle;
}

.nm-backlink:hover { background: var(--nm-green-soft); color: var(--nm-teal); border-color: transparent; }

/* On a phone the label goes and the arrow carries it, so it stays out of the
   way of the avatar and the language switcher. */
@media (max-width: 575px) {
    .nm-backlink { padding: 7px 10px; margin-right: 6px; }
    .nm-backlink span { display: none; }
}