/* ============================================================
   ROMAN CONCRETE ERP — EXECUTIVE EXPERIENCE
   Light premium design language
   Roman Concrete green / charcoal / white
   ============================================================ */

:root {
    --rc-green: #00A651;
    --rc-green-bright: #10B866;
    --rc-green-dark: #007C3D;
    --rc-green-deep: #005F30;

    --rc-charcoal: #20252A;
    --rc-text: #20272C;
    --rc-muted: #737B78;

    --rc-bg: #F6F9F7;
    --rc-white: #FFFFFF;
    --rc-soft: #EDF8F2;
    --rc-soft-2: #F4FBF7;

    --rc-border: rgba(30, 83, 56, .11);
    --rc-border-strong: rgba(0, 166, 81, .22);

    --rc-shadow:
        0 12px 32px rgba(31, 49, 40, .075);

    --rc-shadow-soft:
        0 5px 18px rgba(31, 49, 40, .055);

    --rc-glow:
        0 18px 50px rgba(0, 166, 81, .10);

    --rc-radius: 14px;
    --rc-radius-lg: 20px;
}


/* ============================================================
   DESK BACKGROUND
   ============================================================ */

body,
.page-container,
.layout-main,
.layout-main-section,
.desk-page {
    background:
        radial-gradient(
            circle at 96% 20%,
            rgba(0,166,81,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 72% 95%,
            rgba(0,166,81,.055),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #FBFCFB 0%,
            #F4F8F5 55%,
            #F0F8F4 100%
        ) !important;
}


/* subtle green edge glow like SERENE ONE */

.page-container::after {
    content: "";
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    width: 3px;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,166,81,.60),
            rgba(0,166,81,.14)
        );

    box-shadow:
        -8px 0 28px rgba(0,166,81,.08);

    z-index: 100;
}


/* ============================================================
   LEFT SIDEBAR — LIGHT EXECUTIVE
   Overrides Brand3 dark sidebar
   ============================================================ */

body .layout-side-section {
    background:
        rgba(255,255,255,.96) !important;

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

    border-right:
        1px solid rgba(31,62,46,.08) !important;

    box-shadow:
        8px 0 28px rgba(31,49,40,.045) !important;

    backdrop-filter:
        blur(14px);
}

body .layout-side-section::before {
    display: none !important;
}


/* sidebar content */

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


/* sidebar brand */

body .rc-desk-brand {
    margin:
        9px 8px 18px !important;

    padding:
        10px 8px !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}

body .rc-desk-brand-icon {
    width:
        40px !important;

    height:
        40px !important;

    flex:
        0 0 40px !important;

    border-radius:
        11px !important;

    background:
        linear-gradient(
            145deg,
            var(--rc-green),
            var(--rc-green-dark)
        ) !important;

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

body .rc-desk-brand-copy strong {
    color:
        var(--rc-charcoal) !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;
}

body .rc-desk-brand-copy span {
    color:
        #6B7470 !important;

    font-size:
        10px !important;
}


/* sidebar labels */

body .layout-side-section .sidebar-label,
body .layout-side-section .standard-sidebar-label {
    color:
        #7F8984 !important;

    font-size:
        11px !important;

    font-weight:
        650 !important;

    letter-spacing:
        .01em !important;

    text-transform:
        none !important;
}


/* sidebar entries */

body .layout-side-section .standard-sidebar-item,
body .layout-side-section .sidebar-item {
    position:
        relative;

    min-height:
        38px;

    margin:
        2px 7px !important;

    padding:
        8px 10px !important;

    color:
        #333B37 !important;

    border:
        1px solid transparent !important;

    border-radius:
        11px !important;

    background:
        transparent !important;

    font-weight:
        520 !important;

    transition:
        all .18s ease !important;
}


/* hover */

body .layout-side-section .standard-sidebar-item:hover,
body .layout-side-section .sidebar-item:hover {
    color:
        var(--rc-green-dark) !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,166,81,.075),
            rgba(0,166,81,.025)
        ) !important;

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

    transform:
        translateX(1px) !important;
}


/* selected — SERENE style with thin green line */

body .layout-side-section .standard-sidebar-item.selected,
body .layout-side-section .standard-sidebar-item.active,
body .layout-side-section .sidebar-item.selected,
body .layout-side-section .sidebar-item.active {
    color:
        var(--rc-charcoal) !important;

    background:
        #FFFFFF !important;

    border:
        1px solid rgba(30,75,52,.095) !important;

    box-shadow:
        0 4px 16px rgba(32,55,43,.07),
        inset -3px 0 0 var(--rc-green) !important;

    font-weight:
        650 !important;
}

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

    --icon-stroke:
        currentColor !important;
}


/* bottom user section */

body .layout-side-section .desk-sidebar-bottom,
body .layout-side-section .sidebar-footer {
    border-top:
        1px solid rgba(32,65,48,.07) !important;

    background:
        rgba(255,255,255,.88) !important;
}


/* ============================================================
   FLOATING PAGE HEADER / BREADCRUMB BAR
   ============================================================ */

body .page-head {
    position:
        relative !important;

    margin:
        12px 16px 9px !important;

    width:
        auto !important;

    min-height:
        52px !important;

    padding:
        0 8px !important;

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

    border:
        1px solid rgba(33,74,52,.09) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 8px 26px rgba(32,55,43,.055),
        0 0 34px rgba(0,166,81,.045) !important;

    backdrop-filter:
        blur(16px);
}

body .page-head .container,
body .page-head .page-head-content {
    background:
        transparent !important;
}


/* breadcrumb */

body .page-head .breadcrumb-container,
body .page-head .breadcrumb {
    font-weight:
        520;
}

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

    font-weight:
        720 !important;
}


/* ============================================================
   BUTTONS — SMOOTH GREEN
   ============================================================ */

body .btn-primary {
    background:
        linear-gradient(
            135deg,
            #10B866,
            #009B4C
        ) !important;

    border:
        0 !important;

    color:
        #fff !important;

    border-radius:
        10px !important;

    font-weight:
        650 !important;

    box-shadow:
        0 7px 18px rgba(0,166,81,.20) !important;
}

body .btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #00AA54,
            #008941
        ) !important;

    transform:
        translateY(-1px);

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

body .btn-default,
body .btn-secondary {
    background:
        rgba(255,255,255,.90) !important;

    border:
        1px solid rgba(38,69,53,.085) !important;

    border-radius:
        10px !important;

    box-shadow:
        0 3px 11px rgba(29,49,39,.035);
}

body .btn-default:hover,
body .btn-secondary:hover {
    color:
        var(--rc-green-dark) !important;

    background:
        var(--rc-soft-2) !important;

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


/* ============================================================
   LIST VIEW — SERENE STYLE
   ============================================================ */

body .list-view-container {
    margin:
        7px 16px 18px !important;

    padding:
        10px 14px 15px !important;

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

    border:
        1px solid rgba(34,76,54,.075) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 13px 35px rgba(31,52,41,.06),
        0 0 38px rgba(0,166,81,.04) !important;

    backdrop-filter:
        blur(14px);
}


/* filter/header panel */

body .list-view-container .list-filters,
body .list-view-container .filter-section,
body .filter-section {
    padding:
        12px !important;

    margin-bottom:
        13px !important;

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

    border:
        1px solid rgba(31,68,49,.07) !important;

    border-radius:
        16px !important;

    box-shadow:
        0 7px 22px rgba(32,53,42,.045) !important;
}


/* filter inputs */

body .list-view-container .form-control,
body .filter-section .form-control {
    background:
        rgba(249,251,250,.95) !important;

    border:
        1px solid rgba(37,76,55,.09) !important;

    border-radius:
        10px !important;

    min-height:
        39px !important;
}


/* list heading */

body .list-row-head {
    margin:
        4px 2px 6px !important;

    background:
        rgba(247,250,248,.90) !important;

    border:
        1px solid rgba(33,69,50,.07) !important;

    border-radius:
        12px !important;

    color:
        #4F5853 !important;

    font-weight:
        650 !important;
}


/* list rows become individual floating strips */

body .list-row-container {
    margin:
        6px 2px !important;

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

    border:
        1px solid rgba(34,73,52,.075) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 3px 13px rgba(30,49,39,.045) !important;

    overflow:
        hidden;

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

body .list-row-container:hover {
    background:
        #FFFFFF !important;

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

    box-shadow:
        0 8px 23px rgba(0,166,81,.08) !important;

    transform:
        translateY(-1px);
}


/* status pills */

body .indicator-pill.green,
body .indicator.green {
    color:
        #167544 !important;

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


/* ============================================================
   DOCTYPE FORM — LARGE PREMIUM CARD
   ============================================================ */

body .form-page {
    background:
        transparent !important;
}

body .form-layout {
    margin:
        6px 0 20px !important;

    background:
        transparent !important;
}


/* each logical form section */

body .form-section {
    margin:
        0 0 12px !important;

    padding:
        18px 21px 20px !important;

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

    border:
        1px solid rgba(33,74,52,.075) !important;

    border-radius:
        17px !important;

    box-shadow:
        0 8px 27px rgba(32,52,42,.055) !important;

    backdrop-filter:
        blur(12px);

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

body .form-section:hover {
    border-color:
        rgba(0,166,81,.14) !important;

    box-shadow:
        0 12px 32px rgba(32,52,42,.075) !important;
}


/* section heading */

body .section-head {
    color:
        var(--rc-charcoal) !important;

    font-size:
        13px !important;

    font-weight:
        720 !important;

    margin-bottom:
        15px !important;
}

body .section-head::before {
    width:
        3px !important;

    height:
        15px !important;

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


/* ============================================================
   DOCTYPE FIELDS — SERENE STYLE
   ============================================================ */

body .frappe-control .control-label,
body .frappe-control label {
    color:
        #37403B !important;

    font-size:
        12px !important;

    font-weight:
        660 !important;

    margin-bottom:
        6px !important;
}

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


/* editable fields */

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

    color:
        #17201B !important;

    background:
        linear-gradient(
            145deg,
            #F9FBFA,
            #F5F8F6
        ) !important;

    border:
        1px solid rgba(34,74,52,.10) !important;

    border-radius:
        10px !important;

    box-shadow:
        inset 0 1px 2px rgba(24,44,33,.025),
        0 2px 5px rgba(24,44,33,.018) !important;

    transition:
        all .17s ease !important;
}


/* hover */

body .frappe-control:hover .form-control,
body .frappe-control:hover .input-with-feedback {
    border-color:
        rgba(0,166,81,.17) !important;
}


/* focused */

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

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

    box-shadow:
        0 0 0 3px rgba(0,166,81,.075),
        0 7px 18px rgba(0,166,81,.055) !important;
}


/* readonly */

body .like-disabled-input,
body .control-value,
body .form-control[readonly],
body .form-control:disabled {
    color:
        #5C6661 !important;

    background:
        rgba(242,246,244,.96) !important;

    border-color:
        rgba(35,71,52,.065) !important;

    opacity:
        1 !important;
}


/* rich text */

body .ql-container,
body .ql-toolbar,
body .html-editor {
    border-color:
        rgba(31,71,49,.09) !important;
}

body .ql-toolbar {
    background:
        #F8FAF9 !important;

    border-radius:
        11px 11px 0 0 !important;
}

body .ql-container {
    background:
        #FFFFFF !important;

    border-radius:
        0 0 11px 11px !important;
}


/* ============================================================
   FORM RIGHT SIDEBAR
   ============================================================ */

body .form-sidebar {
    margin-top:
        6px !important;

    padding:
        14px !important;

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

    border:
        1px solid rgba(32,74,51,.075) !important;

    border-radius:
        17px !important;

    box-shadow:
        0 10px 28px rgba(30,50,40,.055) !important;

    backdrop-filter:
        blur(14px);
}

body .form-sidebar .sidebar-menu,
body .form-sidebar .sidebar-section {
    border-color:
        rgba(31,69,49,.065) !important;
}


/* ============================================================
   CHILD TABLES
   ============================================================ */

body .form-grid,
body .grid-body {
    background:
        #FFFFFF !important;

    border:
        1px solid rgba(32,72,51,.08) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 4px 15px rgba(31,50,41,.035);

    overflow:
        hidden;
}

body .grid-heading-row {
    background:
        #F3F8F5 !important;
}

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


/* ============================================================
   WORKSPACE CARDS
   ============================================================ */

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

    overflow:
        hidden;

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

    border:
        1px solid rgba(35,74,53,.075) !important;

    border-radius:
        15px !important;

    box-shadow:
        0 8px 24px rgba(31,51,41,.055) !important;

    transition:
        all .18s ease !important;
}

body .widget.links-widget-box::before,
body .widget.shortcut-widget-box::before,
body .widget.number-widget-box::before {
    content: "";

    position:
        absolute;

    top:
        0;
    left:
        0;
    right:
        0;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            #10B866,
            var(--rc-green),
            #7FCF9F
        );
}

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

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

    box-shadow:
        0 14px 34px rgba(0,166,81,.09) !important;
}


/* ============================================================
   REMOVE OLD BRAND3 DARK DASHBOARD HERO
   ============================================================ */

body .rc-dashboard-hero {
    display:
        none !important;
}


/* ============================================================
   ROMAN CONCRETE OPERATIONS HERO
   ============================================================ */

.rc-ops-hero {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

    margin:
        14px auto 24px;

    width:
        calc(100% - 48px);

    max-width:
        1020px;

    min-height:
        210px;

    padding:
        29px 32px;

    overflow:
        hidden;

    color:
        #fff;

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

    border-radius:
        27px;

    background:
        linear-gradient(
            115deg,
            #22272B 0%,
            #26322C 42%,
            #08703D 100%
        );

    box-shadow:
        0 22px 55px rgba(28,46,37,.18),
        0 0 60px rgba(0,166,81,.08);
}

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

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    right:
        -110px;

    top:
        -190px;

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

    border-radius:
        50%;
}

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

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    right:
        180px;

    bottom:
        -160px;

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

    border-radius:
        50%;
}

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

    z-index:
        2;

    max-width:
        660px;
}

.rc-ops-eyebrow {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        6px 11px;

    margin-bottom:
        13px;

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

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

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

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        750;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}

.rc-ops-eyebrow::before {
    content: "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #19CC70;

    box-shadow:
        0 0 0 4px rgba(25,204,112,.15);
}

.rc-ops-hero h1 {
    margin:
        0 0 11px;

    max-width:
        690px;

    color:
        #FFFFFF;

    font-size:
        clamp(29px, 3vw, 43px);

    line-height:
        1.06;

    font-weight:
        800;

    letter-spacing:
        -.035em;
}

.rc-ops-hero p {
    max-width:
        660px;

    margin:
        0;

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

    font-size:
        14px;

    line-height:
        1.65;
}

.rc-ops-action {
    position:
        relative;

    z-index:
        2;

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        13px 17px;

    color:
        #203229 !important;

    background:
        #F4FBF7;

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

    border-radius:
        13px;

    font-size:
        12px;

    font-weight:
        700;

    box-shadow:
        0 10px 25px rgba(0,0,0,.12);

    text-decoration:
        none !important;
}

.rc-ops-action:hover {
    color:
        var(--rc-green-dark) !important;

    background:
        #FFFFFF;
}

.rc-ops-action-mark {
    display:
        grid;

    place-items:
        center;

    width:
        28px;

    height:
        28px;

    border-radius:
        8px;

    color:
        var(--rc-green-dark);

    background:
        rgba(0,166,81,.08);

    font-size:
        17px;
}


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

body .number-widget-box,
body .dashboard-widget-box {
    border-radius:
        16px !important;

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

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

    font-weight:
        800 !important;
}


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

body .dropdown-menu {
    border:
        1px solid rgba(32,70,50,.08) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 18px 42px rgba(29,48,38,.15) !important;
}

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

body .dropdown-item:hover {
    color:
        var(--rc-green-dark) !important;

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

body .modal-content {
    border:
        1px solid rgba(31,68,49,.07) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 26px 70px rgba(25,43,34,.22) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {

    .rc-ops-hero {
        width:
            calc(100% - 28px);

        min-height:
            180px;

        padding:
            24px;
    }

    .rc-ops-action {
        display:
            none;
    }
}


@media (max-width: 767px) {

    body .page-head {
        margin:
            8px 9px !important;

        border-radius:
            14px !important;
    }

    body .list-view-container {
        margin:
            6px 8px 12px !important;

        padding:
            8px !important;

        border-radius:
            15px !important;
    }

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

        border-radius:
            14px !important;
    }

    .rc-ops-hero {
        min-height:
            170px;

        border-radius:
            20px;

        padding:
            22px;
    }

    .rc-ops-hero h1 {
        font-size:
            27px;
    }

    .rc-ops-hero p {
        font-size:
            12px;
    }
}