/* =========================================================
   ROMAN CONCRETE ERP
   PREMIUM DESK / FORMS / DASHBOARD EXPERIENCE
   ========================================================= */

:root {
    --rc-green: #00A651;
    --rc-green-2: #00B85A;
    --rc-green-dark: #007D3D;
    --rc-green-deep: #005F30;

    --rc-charcoal: #202428;
    --rc-charcoal-2: #292E33;
    --rc-charcoal-3: #343A40;

    --rc-bg: #F3F6F4;
    --rc-card: #FFFFFF;
    --rc-soft-green: #EAF8F0;

    --rc-border: #DDE5E0;
    --rc-muted: #737B76;

    --rc-shadow-sm:
        0 4px 14px rgba(26, 39, 32, .06);

    --rc-shadow:
        0 10px 30px rgba(26, 39, 32, .09);

    --rc-shadow-green:
        0 14px 36px rgba(0, 166, 81, .16);

    --rc-radius: 12px;
    --rc-radius-lg: 18px;
}


/* =========================================================
   GLOBAL DESK
   ========================================================= */

body,
.page-container,
.layout-main,
.layout-main-section {
    background:
        linear-gradient(
            135deg,
            #F7F9F8 0%,
            #F1F5F2 100%
        ) !important;
}

.layout-main-section {
    border-radius: 0 !important;
}


/* =========================================================
   TOP NAVBAR
   ========================================================= */

.navbar {
    min-height: 52px !important;

    background:
        rgba(255, 255, 255, .97) !important;

    border-bottom:
        1px solid #E0E7E3 !important;

    box-shadow:
        0 3px 18px rgba(25, 39, 31, .06) !important;

    backdrop-filter:
        blur(14px);
}

.navbar .search-bar,
.navbar .awesomplete input {
    background:
        #F3F6F4 !important;

    border:
        1px solid transparent !important;

    border-radius:
        12px !important;

    transition:
        all .2s ease;
}

.navbar .search-bar:focus-within,
.navbar .awesomplete input:focus {
    background:
        #fff !important;

    border-color:
        var(--rc-green) !important;

    box-shadow:
        0 0 0 4px rgba(0,166,81,.10) !important;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-head {
    min-height: 48px !important;

    background:
        rgba(255,255,255,.98) !important;

    border-bottom:
        1px solid var(--rc-border) !important;

    box-shadow:
        0 2px 10px rgba(23,35,29,.03);
}

.page-head .title-text,
.page-title .title-text {
    color:
        var(--rc-charcoal) !important;

    font-weight:
        750 !important;

    letter-spacing:
        -.01em;
}

.page-head .breadcrumb-container a,
.page-head .breadcrumb-item a {
    color:
        var(--rc-muted) !important;
}

.page-head .breadcrumb-container a:hover,
.page-head .breadcrumb-item a:hover {
    color:
        var(--rc-green) !important;
}


/* =========================================================
   PREMIUM SIDEBAR
   ========================================================= */

.layout-side-section {
    background:
        linear-gradient(
            180deg,
            #23272B 0%,
            #1B1F22 100%
        ) !important;

    border-right:
        0 !important;

    box-shadow:
        8px 0 28px rgba(18, 25, 21, .12);

    color:
        #fff !important;
}

.layout-side-section::before {
    content: "";

    display: block;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--rc-green-deep),
            var(--rc-green),
            #18D070
        );
}


/* sidebar module title */

.layout-side-section .sidebar-menu,
.layout-side-section .desk-sidebar {
    background:
        transparent !important;
}

.layout-side-section .sidebar-label,
.layout-side-section .standard-sidebar-label {
    color:
        rgba(255,255,255,.42) !important;

    font-size:
        10px !important;

    font-weight:
        750 !important;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


/* sidebar links */

.layout-side-section .standard-sidebar-item,
.layout-side-section .sidebar-item {
    min-height:
        38px;

    margin:
        3px 8px !important;

    padding:
        8px 10px !important;

    border-radius:
        10px !important;

    color:
        rgba(255,255,255,.78) !important;

    transition:
        all .18s ease !important;
}

.layout-side-section .standard-sidebar-item:hover,
.layout-side-section .sidebar-item:hover {
    color:
        #fff !important;

    background:
        rgba(0,166,81,.18) !important;

    transform:
        translateX(2px);
}


/* active sidebar */

.layout-side-section .standard-sidebar-item.selected,
.layout-side-section .standard-sidebar-item.active,
.layout-side-section .sidebar-item.selected,
.layout-side-section .sidebar-item.active {
    color:
        #fff !important;

    background:
        linear-gradient(
            100deg,
            rgba(0,166,81,.95),
            rgba(0,125,61,.92)
        ) !important;

    box-shadow:
        0 7px 20px rgba(0,166,81,.24);

    font-weight:
        650 !important;
}


/* sidebar text */

.layout-side-section a,
.layout-side-section span,
.layout-side-section .sidebar-item-label {
    color:
        inherit;
}


/* sidebar icons */

.layout-side-section svg,
.layout-side-section .icon {
    --icon-stroke:
        currentColor !important;

    stroke:
        currentColor !important;
}


/* user profile bottom */

.layout-side-section .desk-sidebar-bottom,
.layout-side-section .sidebar-footer {
    border-top:
        1px solid rgba(255,255,255,.08) !important;
}


/* =========================================================
   ROMAN CONCRETE BRAND CARD
   ========================================================= */

.rc-desk-brand {
    margin:
        12px 10px 18px !important;

    padding:
        13px !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.03)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 8px 24px rgba(0,0,0,.16) !important;
}

.rc-desk-brand-copy strong {
    color:
        #fff !important;
}

.rc-desk-brand-copy span {
    color:
        rgba(255,255,255,.55) !important;
}


/* =========================================================
   FORMS — GENERAL
   ========================================================= */

.form-layout,
.form-dashboard,
.form-page,
.frappe-card {
    background:
        transparent !important;
}

.form-layout {
    padding-top:
        8px;
}


/* form sections */

.form-section {
    margin-bottom:
        14px !important;

    padding:
        18px 20px 20px !important;

    background:
        #fff !important;

    border:
        1px solid var(--rc-border) !important;

    border-radius:
        14px !important;

    box-shadow:
        var(--rc-shadow-sm);

    transition:
        box-shadow .18s ease,
        border-color .18s ease;
}

.form-section:hover {
    border-color:
        #D1DED7 !important;

    box-shadow:
        var(--rc-shadow);
}


/* section headings */

.section-head {
    position:
        relative;

    margin-bottom:
        16px !important;

    color:
        var(--rc-charcoal) !important;

    font-size:
        14px !important;

    font-weight:
        750 !important;

    letter-spacing:
        -.01em;
}

.section-head::before {
    content: "";

    display:
        inline-block;

    width:
        4px;

    height:
        17px;

    margin-right:
        8px;

    border-radius:
        4px;

    vertical-align:
        -3px;

    background:
        linear-gradient(
            180deg,
            var(--rc-green-2),
            var(--rc-green-dark)
        );
}


/* =========================================================
   FORM LABELS
   ========================================================= */

.frappe-control .control-label,
.frappe-control label,
.form-group > label,
.grid-heading-row .static-area {
    color:
        #343B37 !important;

    font-size:
        12px !important;

    font-weight:
        650 !important;

    letter-spacing:
        .005em;
}

.reqd {
    color:
        var(--rc-green) !important;
}


/* =========================================================
   INPUT FIELDS
   ========================================================= */

.form-control,
.input-with-feedback,
.control-input input,
.control-input textarea,
.control-input select,
.frappe-control input,
.frappe-control textarea,
.frappe-control select {
    min-height:
        40px !important;

    background:
        #F8FAF9 !important;

    border:
        1.5px solid #DCE4DF !important;

    border-radius:
        10px !important;

    color:
        #222824 !important;

    font-weight:
        500;

    box-shadow:
        inset 0 1px 2px rgba(20,30,24,.025) !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/* focus fields */

.form-control:focus,
.input-with-feedback:focus,
.control-input input:focus,
.control-input textarea:focus,
.control-input select:focus,
.frappe-control input:focus,
.frappe-control textarea:focus {
    background:
        #fff !important;

    border-color:
        var(--rc-green) !important;

    box-shadow:
        0 0 0 4px rgba(0,166,81,.10),
        0 5px 14px rgba(0,166,81,.07) !important;
}


/* hover fields */

.frappe-control:hover .form-control,
.frappe-control:hover .input-with-feedback {
    border-color:
        #C5D6CC !important;
}


/* read only */

.like-disabled-input,
.control-value,
.form-control[readonly],
.form-control:disabled {
    background:
        #EEF2F0 !important;

    color:
        #4F5853 !important;

    border-color:
        #E1E7E3 !important;

    opacity:
        1 !important;
}


/* textareas */

textarea.form-control,
.control-input textarea {
    min-height:
        90px !important;

    padding:
        10px 12px !important;
}


/* select dropdown area */

select.form-control {
    cursor:
        pointer;
}


/* =========================================================
   LINK / AUTOCOMPLETE FIELDS
   ========================================================= */

.awesomplete > ul {
    margin-top:
        6px !important;

    border:
        1px solid var(--rc-border) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 16px 45px rgba(21,33,27,.16) !important;

    overflow:
        hidden;
}

.awesomplete > ul > li {
    padding:
        9px 12px !important;
}

.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
    background:
        var(--rc-soft-green) !important;

    color:
        var(--rc-green-dark) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    border-radius:
        9px !important;

    font-weight:
        600 !important;

    transition:
        all .18s ease !important;
}

.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--rc-green-2),
            var(--rc-green-dark)
        ) !important;

    border:
        0 !important;

    color:
        #fff !important;

    box-shadow:
        0 6px 17px rgba(0,166,81,.21) !important;
}

.btn-primary:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 9px 23px rgba(0,166,81,.28) !important;
}

.btn-default {
    background:
        #fff !important;

    border:
        1px solid var(--rc-border) !important;
}

.btn-default:hover {
    border-color:
        rgba(0,166,81,.35) !important;

    background:
        var(--rc-soft-green) !important;
}


/* =========================================================
   TABS
   ========================================================= */

.form-tabs-list,
.nav-tabs {
    border-bottom:
        1px solid var(--rc-border) !important;
}

.nav-tabs .nav-link,
.form-tabs .nav-link {
    color:
        #69716D !important;

    font-weight:
        600;
}

.nav-tabs .nav-link.active,
.form-tabs .nav-link.active {
    color:
        var(--rc-green-dark) !important;

    border-bottom:
        2px solid var(--rc-green) !important;
}


/* =========================================================
   TABLE / CHILD TABLE
   ========================================================= */

.form-grid,
.grid-body {
    border:
        1px solid var(--rc-border) !important;

    border-radius:
        12px !important;

    overflow:
        hidden;

    background:
        #fff !important;
}

.grid-heading-row {
    background:
        #F0F5F2 !important;

    border-bottom:
        1px solid var(--rc-border) !important;
}

.grid-row {
    transition:
        background .15s ease;
}

.grid-row:hover {
    background:
        #F4FBF7 !important;
}


/* =========================================================
   LIST VIEW
   ========================================================= */

.list-row-container {
    border-bottom:
        1px solid #E8ECE9 !important;

    transition:
        background .15s ease,
        transform .15s ease;
}

.list-row-container:hover {
    background:
        #F3FAF6 !important;
}

.list-view-container {
    background:
        #fff !important;

    border:
        1px solid var(--rc-border) !important;

    border-radius:
        14px !important;

    box-shadow:
        var(--rc-shadow-sm);

    overflow:
        hidden;
}


/* =========================================================
   DASHBOARD HERO
   ========================================================= */

.rc-dashboard-hero {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin:
        8px 0 20px;

    padding:
        22px 24px;

    min-height:
        112px;

    overflow:
        hidden;

    border-radius:
        18px;

    background:
        linear-gradient(
            120deg,
            #1F2427 0%,
            #28302C 50%,
            #006F37 135%
        );

    box-shadow:
        0 18px 45px rgba(20,31,25,.18);
}

.rc-dashboard-hero::before {
    content: "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -100px;

    top:
        -120px;

    border-radius:
        50%;

    background:
        rgba(0,166,81,.24);
}

.rc-dashboard-hero::after {
    content: "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    right:
        100px;

    bottom:
        -130px;

    border-radius:
        50%;

    border:
        35px solid rgba(255,255,255,.035);
}

.rc-dashboard-hero-copy {
    position:
        relative;

    z-index:
        2;
}

.rc-dashboard-hero-eyebrow {
    color:
        #41D486;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    margin-bottom:
        6px;
}

.rc-dashboard-hero h2 {
    margin:
        0 0 5px;

    color:
        #fff;

    font-size:
        23px;

    font-weight:
        760;

    letter-spacing:
        -.02em;
}

.rc-dashboard-hero p {
    margin:
        0;

    color:
        rgba(255,255,255,.62);

    font-size:
        12px;
}

.rc-dashboard-hero-logo {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        86px;

    height:
        86px;

    flex:
        0 0 86px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.08);

    backdrop-filter:
        blur(10px);
}

.rc-dashboard-hero-logo img {
    width:
        70px;

    height:
        70px;

    object-fit:
        contain;
}


/* =========================================================
   DASHBOARD KPI CARDS
   ========================================================= */

.dashboard-widget-box,
.widget.number-widget-box,
.number-card,
.widget.shortcut-widget-box,
.widget.links-widget-box {
    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #FBFDFC
        ) !important;

    border:
        1px solid var(--rc-border) !important;

    border-radius:
        15px !important;

    box-shadow:
        var(--rc-shadow-sm) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.dashboard-widget-box:hover,
.widget.number-widget-box:hover,
.number-card:hover,
.widget.shortcut-widget-box:hover,
.widget.links-widget-box:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(0,166,81,.28) !important;

    box-shadow:
        var(--rc-shadow-green) !important;
}


/* small green top accent */

.dashboard-widget-box::before,
.widget.number-widget-box::before,
.number-card::before {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--rc-green-dark),
            var(--rc-green-2)
        );
}


/* KPI values */

.number-widget-box .number,
.number-card .number,
.dashboard-widget-box .number {
    color:
        var(--rc-charcoal) !important;

    font-weight:
        800 !important;

    letter-spacing:
        -.03em;
}


/* =========================================================
   CHARTS
   ========================================================= */

.chart-container,
.frappe-chart,
.graph-svg-tip {
    border-radius:
        12px !important;
}

.dashboard-widget-box .chart-container {
    padding:
        8px;
}


/* =========================================================
   GETTING STARTED PANEL
   ========================================================= */

.onboarding-widget-box,
.onboarding-step,
.widget.onboarding-widget-box {
    border:
        1px solid var(--rc-border) !important;

    border-radius:
        15px !important;

    box-shadow:
        0 16px 42px rgba(21,32,26,.13) !important;
}

.onboarding-widget-box .indicator-pill,
.onboarding-step .indicator-pill {
    border-radius:
        50px !important;
}


/* =========================================================
   MODALS
   ========================================================= */

.modal-content {
    border:
        0 !important;

    border-radius:
        16px !important;

    box-shadow:
        0 24px 70px rgba(18,28,22,.24) !important;

    overflow:
        hidden;
}

.modal-header {
    border-bottom:
        1px solid var(--rc-border) !important;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu {
    padding:
        6px !important;

    border:
        1px solid var(--rc-border) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 16px 40px rgba(18,29,23,.16) !important;
}

.dropdown-item {
    border-radius:
        8px !important;
}

.dropdown-item:hover {
    background:
        var(--rc-soft-green) !important;

    color:
        var(--rc-green-dark) !important;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

::-webkit-scrollbar {
    width:
        8px;

    height:
        8px;
}

::-webkit-scrollbar-track {
    background:
        transparent;
}

::-webkit-scrollbar-thumb {
    background:
        #C4CCC7;

    border-radius:
        10px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        var(--rc-green);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .form-section {
        padding:
            14px !important;

        border-radius:
            12px !important;
    }

    .rc-dashboard-hero {
        padding:
            18px;

        min-height:
            100px;
    }

    .rc-dashboard-hero h2 {
        font-size:
            18px;
    }

    .rc-dashboard-hero-logo {
        width:
            64px;

        height:
            64px;

        flex-basis:
            64px;
    }

    .rc-dashboard-hero-logo img {
        width:
            52px;

        height:
            52px;
    }
}