/*
 * jomlah base look: the brand kit applied to the CRM (staff area, sign-in pages, customer portal).
 * Jade = trust, lime = the action, coral = the friendly signature (and warnings), cream = room to breathe, ink = text.
 * Headlines Plus Jakarta Sans, body Inter (Perfex already carries Inter). Rounded: pills for buttons, generous radius on cards.
 * A tenant's own colours (Setup > Branding, when the plan has them) are printed after this file and win.
 */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

:root {
    --jm-jade: #003a32;
    --jm-jade-2: #0b5a4b;
    --jm-jade-3: #14705e;
    --jm-lime: #c3f457;
    --jm-lime-2: #9fe12f;
    --jm-coral: #ff603c;
    --jm-cream: #fffcf5;
    --jm-sand: #f6f3e8;
    --jm-ink: #27352f;
    --jm-muted: #6a766f;
    --jm-line: #e7e2d2;
    --jm-radius: 16px;
    --jm-radius-sm: 10px;
    --jm-shadow: 0 1px 2px rgba(0, 58, 50, .05), 0 6px 18px rgba(0, 58, 50, .05);
    --jm-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ---------------------------------------------------------------- type */
body, input, select, textarea, button, .btn {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--jm-ink);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .panel-heading, .page-title, .modal-title,
.tw-font-bold, .tw-font-semibold, .tw-font-medium {
    font-family: var(--jm-head);
    letter-spacing: -.01em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--jm-jade); font-weight: 700; }
a { color: var(--jm-jade-2); }
a:hover, a:focus { color: var(--jm-jade); }
.text-muted, .text-secondary { color: var(--jm-muted) !important; }
.text-primary, .tw-text-primary-600 { color: var(--jm-jade-2) !important; }
.text-success { color: #1b7f4b !important; }
.text-danger { color: #d6391a !important; }
.text-warning { color: #b46a00 !important; }
.text-info { color: var(--jm-jade-3) !important; }

/* tailwind's "primary" blue scale, remapped to jade */
.tw-text-primary-50 { color: #f1f8f5 !important; }  .tw-bg-primary-50 { background-color: #f1f8f5 !important; }
.tw-text-primary-100 { color: #dcefe7 !important; } .tw-bg-primary-100 { background-color: #dcefe7 !important; }
.tw-text-primary-200 { color: #b9dfd0 !important; } .tw-bg-primary-200 { background-color: #b9dfd0 !important; }
.tw-text-primary-300 { color: #86c7b0 !important; } .tw-bg-primary-300 { background-color: #86c7b0 !important; }
.tw-text-primary-400 { color: #4ba487 !important; } .tw-bg-primary-400 { background-color: #4ba487 !important; }
.tw-text-primary-500 { color: #1f7c64 !important; } .tw-bg-primary-500 { background-color: #1f7c64 !important; }
.tw-bg-primary-600, .tw-border-primary-600 { background-color: var(--jm-jade-2) !important; border-color: var(--jm-jade-2) !important; }
.tw-text-primary-700 { color: #004a3f !important; } .tw-bg-primary-700 { background-color: #004a3f !important; }
.tw-text-primary-800 { color: var(--jm-jade) !important; } .tw-bg-primary-800 { background-color: var(--jm-jade) !important; }
.tw-text-primary-900 { color: #00302a !important; } .tw-bg-primary-900 { background-color: #00302a !important; }
.tw-text-primary-950 { color: #00201c !important; } .tw-bg-primary-950 { background-color: #00201c !important; }
.tw-ring-primary-500 { --tw-ring-color: rgba(195, 244, 87, .6) !important; }

/* ---------------------------------------------------------------- staff area: frame */
body, body.admin { background-color: var(--jm-jade); }
#wrapper, .content, body.customers, body.client { background-color: var(--jm-sand); }
#header { background: var(--jm-cream); border-bottom: 1px solid var(--jm-line); box-shadow: none; }
#header .navbar-nav > li > a, #header a { color: var(--jm-ink); }
#header .icon-badge, .notifications-wrapper .badge { background: var(--jm-coral); color: #fff; }

/* sidebar */
#menu, #menu .sidebar, .sidebar { background-color: var(--jm-jade); }
#side-menu li > a, #setup-menu li > a { color: #dcebe5; font-weight: 500; border-radius: 10px; margin: 1px 8px; }
#side-menu li > a > i, #setup-menu li > a > i { color: #8fbcae; }
#side-menu li > a:hover, #side-menu li > a:focus, #setup-menu li > a:hover {
    background-color: rgba(255, 255, 255, .07); color: #fff;
}
#side-menu li.active > a, #setup-menu li.active > a, #side-menu li.menu-item-active > a {
    background-color: rgba(195, 244, 87, .16); color: var(--jm-lime); border-left-color: var(--jm-lime) !important;
}
#side-menu li.active > a > i, #side-menu li > a:hover > i { color: var(--jm-lime); }
#side-menu li .nav-second-level, #side-menu .nav-second-level li a { background-color: transparent; }
#side-menu li .nav-second-level li a { color: #b9d4ca; }
#side-menu li .nav-second-level li.active > a { color: var(--jm-lime); background: transparent; }
#side-menu .badge, #setup-menu .badge { background: var(--jm-coral); }
.sidebar .tw-border-neutral-700, #menu hr { border-color: rgba(255, 255, 255, .1); }

/* ---------------------------------------------------------------- cards and panels */
.panel_s, .panel, .panel-default, .widget, .dashboard .panel_s {
    background: #fff; border: 1px solid var(--jm-line); border-radius: var(--jm-radius); box-shadow: var(--jm-shadow);
}
.panel_s > .panel-body, .panel-body { border-radius: var(--jm-radius); }
.panel_s .panel-heading { background: transparent; border-bottom: 1px solid var(--jm-line); border-radius: var(--jm-radius) var(--jm-radius) 0 0; color: var(--jm-jade); font-weight: 700; }
.modal-content { border-radius: 20px; border: 1px solid var(--jm-line); box-shadow: 0 20px 60px rgba(0, 58, 50, .2); }
.modal-header { border-bottom: 1px solid var(--jm-line); }
.modal-footer { border-top: 1px solid var(--jm-line); }
.dropdown-menu { border-radius: 12px; border: 1px solid var(--jm-line); box-shadow: 0 10px 30px rgba(0, 58, 50, .12); padding: 6px; }
.dropdown-menu > li > a { border-radius: 8px; color: var(--jm-ink); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: #eef7f3; color: var(--jm-jade); }
hr { border-top-color: var(--jm-line); }

/* ---------------------------------------------------------------- buttons: pills, lime for the main action */
.btn { border-radius: 999px; font-weight: 600; padding-left: 16px; padding-right: 16px; transition: background-color .15s, box-shadow .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn-xs, .btn-sm { padding-left: 12px; padding-right: 12px; }
.btn-primary, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
    background: var(--jm-lime); border-color: var(--jm-lime); color: var(--jm-jade);
}
.btn-primary:hover, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary {
    background: var(--jm-lime-2); border-color: var(--jm-lime-2); color: var(--jm-jade);
}
.btn-primary[disabled], .btn-primary.disabled { background: #dcebb4; border-color: #dcebb4; color: #5b7a6e; opacity: 1; }
.btn-default, .btn-secondary { background: #fff; border-color: var(--jm-line); color: var(--jm-jade); }
.btn-default:hover, .btn-default:focus, .btn-secondary:hover { background: #eef7f3; border-color: #c9ded5; color: var(--jm-jade); }
.btn-info { background: var(--jm-jade-2); border-color: var(--jm-jade-2); color: #fff; }
.btn-info:hover, .btn-info:focus { background: var(--jm-jade); border-color: var(--jm-jade); color: #fff; }
.btn-success { background: var(--jm-jade-3); border-color: var(--jm-jade-3); color: #fff; }
.btn-success:hover, .btn-success:focus { background: var(--jm-jade); border-color: var(--jm-jade); color: #fff; }
.btn-danger { background: var(--jm-coral); border-color: var(--jm-coral); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background: #e84a26; border-color: #e84a26; color: #fff; }
.btn-warning { background: #ffd24a; border-color: #ffd24a; color: #4a3600; }
.btn-warning:hover { background: #f5c42a; border-color: #f5c42a; color: #4a3600; }
.btn-link { color: var(--jm-jade-2); }
.btn-group .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-btn > .btn { border-radius: 0 var(--jm-radius-sm) var(--jm-radius-sm) 0; }

/* ---------------------------------------------------------------- forms */
.form-control, .bootstrap-select > .dropdown-toggle, .input-group-addon, .select2-selection {
    border-radius: var(--jm-radius-sm); border-color: #d9d4c3; background-color: #fff; box-shadow: none; color: var(--jm-ink);
}
.input-group-addon { background: var(--jm-sand); }
.form-control:focus, .bootstrap-select.open > .dropdown-toggle, .bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--jm-jade-3); box-shadow: 0 0 0 3px rgba(195, 244, 87, .45); outline: 0;
}
label, .control-label { color: var(--jm-ink); font-weight: 600; }
.radio input[type=radio]:checked + label::after, .checkbox input[type=checkbox]:checked + label::after { color: var(--jm-jade); }
.checkbox input[type=checkbox]:checked + label::before, .radio input[type=radio]:checked + label::before { background: var(--jm-lime); border-color: var(--jm-lime-2); }
.onoffswitch-checkbox:checked + .onoffswitch-label { background-color: var(--jm-jade-3); border-color: var(--jm-jade-3); }

/* ---------------------------------------------------------------- tables, tabs, labels, pagination */
.table > thead > tr > th { background: var(--jm-sand); color: var(--jm-jade); border-bottom: 1px solid var(--jm-line); font-weight: 700; }
.table > tbody > tr > td { border-top-color: #efeadb; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fffdf8; }
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background-color: #f4faf7; }
table.dataTable thead th { background: var(--jm-sand); }
.nav-tabs { border-bottom-color: var(--jm-line); }
.nav-tabs > li > a { color: var(--jm-muted); border-radius: 10px 10px 0 0; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: var(--jm-jade); border-bottom: 3px solid var(--jm-lime-2); background: transparent; font-weight: 600;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background: var(--jm-jade); color: var(--jm-lime); border-radius: 999px; }
.pagination > li > a, .pagination > li > span { border-radius: 8px; margin: 0 2px; color: var(--jm-jade); border-color: var(--jm-line); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--jm-jade); border-color: var(--jm-jade); color: var(--jm-lime); }
.label, .badge { border-radius: 999px; padding: .3em .8em; font-weight: 600; }
.label-default, .badge-default { background: #e9e5d6; color: var(--jm-ink); }
.label-primary { background: var(--jm-jade-2); }
.label-info { background: #d8efe7; color: var(--jm-jade); }
.label-success { background: #d3f2a8; color: #1c4a12; }
.label-warning { background: #ffe9a8; color: #5a4300; }
.label-danger { background: #ffd9cf; color: #9a2410; }
.progress { border-radius: 999px; background: #ece7d6; box-shadow: none; }
.progress-bar { background-color: var(--jm-jade-3); }
.progress-bar-success { background-color: var(--jm-lime-2); }
.progress-bar-danger { background-color: var(--jm-coral); }
.alert { border-radius: 12px; border-width: 1px; }
.alert-info { background: #e7f4ef; border-color: #c9e6dc; color: var(--jm-jade); }
.alert-success { background: #eef9d8; border-color: #d6ee9f; color: #25490f; }
.alert-warning { background: #fff6d6; border-color: #f5e08f; color: #5a4300; }
.alert-danger { background: #ffe9e2; border-color: #ffc4b4; color: #8c2410; }
.alert-dismissible .close { color: inherit; }
#alerts .alert, .alert-float { box-shadow: var(--jm-shadow); }

/* ---------------------------------------------------------------- sign-in pages (staff and customer) */
body.authentication, body.login_admin, body.authentication_form {
    background: var(--jm-cream);
}
.authentication-form-wrapper, .authentication .panel_s, .login_admin .panel_s {
    border-radius: 24px; border: 1px solid var(--jm-line); box-shadow: 0 20px 60px rgba(0, 58, 50, .1);
}
.authentication .company-logo, .authentication h1, .authentication h2, .authentication .page-title { font-family: var(--jm-head); }

/* ---------------------------------------------------------------- customer portal */
.navbar-default, .navbar-inverse { background: var(--jm-cream); border: 0; border-bottom: 1px solid var(--jm-line); border-radius: 0; }
.navbar-default .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a { color: var(--jm-jade); font-weight: 600; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a {
    color: var(--jm-jade-3); background: transparent;
}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover { color: var(--jm-jade); font-family: var(--jm-head); font-weight: 800; }
#client-footer, footer.footer, .footer { background: var(--jm-cream); border-top: 1px solid var(--jm-line); color: var(--jm-muted); }
.navbar .navbar-brand, .navbar .navbar-brand.logo-text, .navbar-default .navbar-brand.logo { color: var(--jm-jade) !important; font-family: var(--jm-head); font-weight: 800; letter-spacing: -.02em; }
.navbar-default .navbar-nav > li.customers-nav-item-login > a, .navbar-default .navbar-nav > li.customers-nav-item-register > a {
    background: var(--jm-lime) !important; color: var(--jm-jade) !important; border-radius: 999px; font-weight: 700; padding: 8px 18px; margin: 8px 0 8px 8px;
}
.navbar-default .navbar-nav > li.customers-nav-item-login > a:hover, .navbar-default .navbar-nav > li.customers-nav-item-register > a:hover { background: var(--jm-lime-2) !important; }
#client-footer, footer.footer, .footer, .tw-bg-neutral-100 { background: var(--jm-cream); }
.navbar-nav > li > a .fa, .navbar-nav > li > a i { color: inherit; }

/* the logo fits its space: the sidebar header is 63px high, the portal bar a little more, the sign-in pages have room */
#logo a.logo { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 0 6px; margin: 0 !important; }
#logo a.logo img { height: auto; width: auto; max-height: 40px; max-width: 100%; object-fit: contain; }
.navbar-brand.logo img, .navbar-brand img { height: auto; max-height: 36px; width: auto; }
.navbar-brand.logo { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; height: 50px; }
.company-logo img, .authentication-form-wrapper img.img-responsive { max-height: 64px; width: auto; }

/* ---------------------------------------------------------------- collapsed menu: a slim bar of icons (Perfex hides the menu altogether)
   The bar never widens by itself. Pointing at an icon pops out its name, and for an item with a sub-menu the sub-menu, beside the bar. */
@media (min-width: 769px) {
    body.hide-sidebar:not(.show-sidebar) #menu { margin-left: 0; width: 64px !important; overflow: visible; z-index: 1001; }
    body.hide-sidebar:not(.show-sidebar) #wrapper,
    body.hide-sidebar:not(.show-sidebar) #header { margin-left: 64px; }
    body.hide-sidebar:not(.show-sidebar) .btn-bottom-toolbar { margin-left: 64px; width: calc(100% - 64px); min-width: 0; }

    body.hide-sidebar:not(.show-sidebar) #side-menu > li { position: relative; }
    body.hide-sidebar:not(.show-sidebar) #side-menu > li > a { text-align: center; padding-left: 0; padding-right: 0; margin-left: 8px; margin-right: 8px; }
    body.hide-sidebar:not(.show-sidebar) #side-menu .menu-icon { margin: 0; float: none; font-size: 16px; width: auto; }
    body.hide-sidebar:not(.show-sidebar) #side-menu > li > a .menu-text,
    body.hide-sidebar:not(.show-sidebar) #side-menu > li > a .arrow,
    body.hide-sidebar:not(.show-sidebar) #side-menu > li > a .badge,
    body.hide-sidebar:not(.show-sidebar) #side-menu > li > .nav-second-level { display: none !important; }

    /* the pop-out: the name next to the icon, the sub-menu under the name */
    body.hide-sidebar:not(.show-sidebar) #side-menu > li:hover > a .menu-text {
        display: block !important; position: absolute; left: 100%; top: 1px; height: 38px; line-height: 38px; padding: 0 18px 0 14px; margin-left: -2px;
        white-space: nowrap; background: var(--jm-jade-2); color: #fff; font-weight: 600; border-radius: 0 12px 12px 0; box-shadow: 8px 4px 24px rgba(0, 58, 50, .25);
    }
    body.hide-sidebar:not(.show-sidebar) #side-menu > li:hover > .nav-second-level {
        display: block !important; height: auto !important; visibility: visible; position: absolute; left: 100%; top: 40px; min-width: 210px; margin: 0 0 0 -2px; padding: 6px;
        background: var(--jm-jade-2); border-radius: 0 12px 12px 12px; box-shadow: 8px 8px 24px rgba(0, 58, 50, .25); list-style: none;
    }
    body.hide-sidebar:not(.show-sidebar) #side-menu > li:hover > .nav-second-level li a { padding: 8px 12px; margin: 0; color: #e4f1ec; display: block; border-radius: 8px; }
    body.hide-sidebar:not(.show-sidebar) #side-menu > li:hover > .nav-second-level li a:hover { background: rgba(255, 255, 255, .1); color: var(--jm-lime); }
    body.hide-sidebar:not(.show-sidebar) #side-menu > li:hover > .nav-second-level li.active > a { background: transparent; color: var(--jm-lime); padding: 8px 12px; margin: 0; display: block; }

    /* the wordmark does not fit 64px: the icon stands in for it */
    body.hide-sidebar:not(.show-sidebar) #logo a.logo { background: url('../img/jomlah-icon.svg') center / 36px no-repeat; }
    body.hide-sidebar:not(.show-sidebar) #logo a.logo img { visibility: hidden; }
}

/* the Setup panel opens over the slim bar (it is a full 230px menu of its own), with a shadow to lift it off the page */
@media (min-width: 769px) {
    body.hide-sidebar:not(.show-sidebar) #setup-menu-wrapper.display-block { z-index: 1002; box-shadow: 8px 0 30px rgba(0, 58, 50, .25); }
}

/* the base look's main button has jade text on lime: keep that on the empty-list button too */
td.jm-empty-cell .jm-empty a.btn-primary, td.jm-empty-cell .jm-empty a.btn-primary:hover, td.jm-empty-cell .jm-empty a.btn-primary:focus { color: var(--jm-jade) !important; }