.fs-32px{
    font-size: 32px;
}
.fs-34px{
    font-size: 34px;
}

.height-fit-content {
    height: fit-content;
}
/* ======= Remove on google map elements ====== */
.gm-style-cc{
    display: none !important;
}
.gmnoprint{
    display: none !important;
}
.gm-control-active
{
    display: none !important;
}
.gm-fullscreen-control
{
    display: none !important;
}

/* ======= icon hover ====== */
.icon-hover-card i{
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-out;
}
.icon-hover-card:hover i{
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease-in;
}
.hover-icon {
    position: absolute;
    top: 15px;
    right: 20px;
}

.inp-no-border {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border: 0px !important;
}
.w-40 {
    width: 40% !important;
}
.w-30 {
    width: 30% !important;
}
.w-25 {
    width: 25% !important;
}
.w-65 {
    width: 65% !important;
}
.w-100p {
    width: 100px;
}
.w-150px {
    width: 150px !important;
}
.w-180px {
    width: 180px !important;
}
.w-200px { 
    width: 200px !important;
}
.w-370px {
    width: 370px !important;
}
.w-20 {
    width: 20%;
}

.h-46px {
    height: 46px !important;
}

.h-107px {
    height: 107px !important;
}

.color-transparent{
    color: transparent !important;
}

.swal2-actions {
    margin-top: 0px !important;
}
.swal2-confirm {
    margin-top: 0px !important;
}
.swal2-cancel{
    margin-top: 0px !important;
}

.sai-logo-size {
    width: 90% !important;
    height: auto !important;
    margin: auto !important;
    display: block !important;
}

.blockui {
    overflow: initial !important;
}

.icon-position {
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
}

.h-410px {
    height: 410px !important;
}

.folder-lock {
    background-color: var(--sai-warning-light) !important;
    color: var(--sai-text-warning) !important;
    margin-left: -25px;
    margin-bottom: 16px;
    padding: 3px;
    border-radius: 50%;
}

.file-lock {
    background-color: var(--sai-warning-light) !important;
    color: var(--sai-text-warning) !important;
    margin-left: -17px;
    margin-bottom: 16px;
    padding: 3px;
    border-radius: 50%;
}

.border-light-danger{
    border-color: var(--sai-danger-light) !important;
}

.height-97{
    height: 97px !important;
}

.top-10px {
    top: 10px !important;
}
.right-10px { 
    right: 10px !important;
}

.float-right{
    float: right !important;
}

.cursor-auto {
    cursor: auto !important;
}

.inp-secure {
    -webkit-text-security: disc;
}

.hover-none {
    pointer-events: none;
}

.settings-submenu .active {
    background-color: #ededed96;
    padding: 7px 10px 7px 10px;
    border-radius: 10px;
}

/* Ticket Page */

.stat-card{background:#fff;border:1px solid #eff2f5;border-radius:14px;padding:20px 24px;box-shadow:0 0 16px rgba(82,63,105,.05);cursor:pointer;transition:all .2s;flex:1;min-width:100px;text-align:center}
        .stat-card:hover{border-color:#009ef7;box-shadow:0 4px 20px rgba(0,158,247,.12);transform:translateY(-1px)}
        .stat-card.active-filter{border-color:#009ef7;box-shadow:0 4px 20px rgba(0,158,247,.15)}

        .ticket-row{cursor:pointer;transition:background .15s}
        .ticket-row:hover td{background:rgba(0,158,247,.03)!important}
        .ticket-row td{vertical-align:middle}

        .priority-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:50px;font-size:11.5px;font-weight:700}
        .status-badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:8px;font-size:11.5px;font-weight:700;white-space:nowrap}
        .overdue-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;background:#fff5f8;color:#f1416c;border:1px solid #ffd6e0;animation:pulse 2s infinite}
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

        .assignee-stack{display:flex}
        .assignee-stack .symbol{margin-left:-8px;border:2px solid #fff}
        .assignee-stack .symbol:first-child{margin-left:0}

        .filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
        .bulk-bar{background:linear-gradient(135deg,#009ef7,#0077c8);border-radius:10px;padding:10px 20px;display:flex;align-items:center;gap:16px;margin-bottom:16px;animation:slideDown .2s ease}
        @keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

        
        

        /* Priority selector container */
        .priority-grid {
            display: flex;               /* use flex for single-line layout */
            gap: 12px;                   /* space between cards */
            flex-wrap: nowrap;            /* prevent wrapping */
            justify-content: space-between; /* spread evenly */
        }

        /* Each priority card */
        .priority-opt {
            flex: 1;                     /* equal width */
            min-width: 120px;            /* prevent shrinking too small */
            border: 2px solid #f1f3f8;
            border-radius: 12px;
            padding: 14px 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: #fff;
        }

        /* Hover effect */
        .priority-opt:hover {
            border-color: #009ef7;
            background: #f0f9ff;
            transform: translateY(-3px);
        }

        /* Selected card effect */
        .priority-opt.selected {
            border-color: var(--p-color) !important;
            background: var(--p-bg) !important;
            box-shadow: 0 0 0 3px var(--p-shadow);
        }

        /* Icon inside the card */
        .priority-opt .p-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Label inside the card */
        .priority-opt .p-label {
            font-size: 12.5px;
            font-weight: 700;
        }

        /* Responsive: shrink cards on small screens */
        @media (max-width: 600px) {
            .priority-grid {
                gap: 8px;
            }
            .priority-opt {
                min-width: 80px;
                padding: 10px 6px;
            }
            .priority-opt .p-label {
                font-size: 11px;
            }
        }

        /* Drop zone */
        .drop-zone {
            border: 2.5px dashed #d0d5dd;
            border-radius: 14px;
            background: #fafbfc;
            padding: 36px 20px;
            text-align: center;
            cursor: pointer;
            transition: all .25s
        }

        .drop-zone:hover,
        .drop-zone.drag {
            border-color: #009ef7;
            background: #f0f9ff
        }

        .drop-zone input {
            display: none
        }

        /* Attached file row */
        .file-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 10px;
            background: #f9f9f9;
            border: 1.5px solid #f1f3f8;
            margin-bottom: 8px;
            animation: fadeIn .2s ease
        }
        /* Form section */
          .form-section-label {
              font-size: 10.5px;
              font-weight: 700;
              /* text-transform: uppercase; */
              letter-spacing: 1px;
              color: #5e6172;
              margin-bottom: 14px;
              padding-bottom: 10px;
              border-bottom: 1px dashed #e4e6ef;
          }

          /* ── Review block card ── */
        .review-block{
          background:#fff;
          border:1.5px solid #eff2f5;
          border-radius:14px;
          padding:20px 22px;
          height:100%;
          box-shadow:0 0 16px rgba(82,63,105,.05);
        }

        /* ── Row item inside table ── */
        .review-row{
          display:flex;
          align-items:flex-start;
          padding:10px 0;
          border-bottom:1px dashed #f1f3f8;
          gap:12px;
        }
        .review-row:last-child{border-bottom:none;padding-bottom:0}
        .review-row:first-child{padding-top:0}
        [data-bs-theme="dark"] .review-row{border-bottom-color:#2b2b40}

        .review-label{
          flex:0 0 38%;
          font-size:12.5px;
          font-weight:600;
          color:#5e6172;
          padding-top:1px;
        }
        .review-field-val{
          flex:1;
          font-size:13px;
          font-weight:700;
          color:#181c32;
          word-break:break-word;
        }

        /* ── Section icon ── */
        .section-icon-wrap{
          width:28px;height:28px;
          border-radius:7px;
          background:#f9f9f9;
          border:1.5px solid #f1f3f8;
          display:inline-flex;align-items:center;justify-content:center;
          flex-shrink:0;
        }
        [data-sai-stepper-element="content"] {
            display: none;
        }

        [data-sai-stepper-element="content"].current {
            display: block;
        }


        /* Make modal full height */
        .rashmi_modal .modal-dialog {
            height: 95vh;
            display: flex;
        }

        /* Make modal content flex */
        .rashmi_modal .modal-content {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* Scroll only body */
        .rashmi_modal .modal-body {
            overflow-y: auto;
            flex: 1;
        }

        /* Sticky header */
        .rashmi_modal .modal-header {
            position: sticky;
            top: 0;
            z-index: 10;
            background: #fff;
            border-bottom: 1px solid #eee;
        }

        /* Sticky footer */
        .rashmi_modal .modal-footer {
            position: sticky;
            bottom: 0;
            z-index: 10;
            background: #fff;
            border-top: 1px solid #eee;
        }

/* Ticket page end */

/* Technician page */

.page-wrapper {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }

            /* ── Grid cards ── */
            .tech-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
                gap: 20px;
            }

            .tech-grid-card {
                /* background: #fff; */
                /* border: 1.5px solid #eff2f5; */
                border-radius: 16px;
                padding: 24px 20px 20px;
                text-align: center;
                position: relative;
                transition: border-color .2s, box-shadow .2s, transform .2s;
                cursor: pointer;
            }

            .tech-grid-card:hover {
                border-color: #009ef7;
                box-shadow: 0 8px 28px rgba(0, 158, 247, .12);
                transform: translateY(-2px);
            }

            .tech-grid-card .card-menu {
                position: absolute;
                top: 12px;
                right: 12px;
            }

            .tech-avatar-ring {
                width: 72px;
                height: 72px;
                border-radius: 50%;
                margin: 0 auto 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 22px;
                font-weight: 700;
                color: #fff;
                box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
                position: relative;
            }

            .online-dot {
                position: absolute;
                bottom: 3px;
                right: 3px;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                border: 2.5px solid #fff;
            }

            /* ── Upload zone ── */
            .upload-zone {
                border: 2.5px dashed #d0d5dd;
                border-radius: 16px;
                background: #fafbfc;
                padding: 48px 24px;
                text-align: center;
                cursor: pointer;
                transition: all .25s;
            }

            .upload-zone:hover,
            .upload-zone.dragover {
                border-color: #009ef7;
                background: #f0f9ff;
            }

            .upload-zone input {
                display: none;
            }

            /* ── CSV preview table ── */
            .csv-preview {
                max-height: 280px;
                overflow-y: auto;
                border-radius: 10px;
                border: 1px solid #eff2f5;
            }


            .csv-preview::-webkit-scrollbar {
                width: 4px;
            }

            .csv-preview::-webkit-scrollbar-thumb {
                background: #e4e6ef;
                border-radius: 4px;
            }

            /* ── View toggle buttons ── */
            .view-btn {
                width: 36px;
                height: 36px;
                border-radius: 8px;
                border: 1.5px solid #e4e6ef;
                background: transparent;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all .15s;
            }

            .view-btn:hover {
                border-color: #009ef7;
                background: #f0f9ff;
            }

            .view-btn.active {
                background: #009ef7;
                border-color: #009ef7;
            }

            .view-btn.active i {
                color: #fff !important;
            }

            /* ── Status badge ── */
            .status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                display: inline-block;
            }

            /* ── Skill pills ── */
            .skill-pill {
                display: inline-flex;
                align-items: center;
                padding: 3px 10px;
                border-radius: 50px;
                font-size: 11px;
                font-weight: 600;
                background: #f1faff;
                color: #009ef7;
                border: 1px solid #d0eeff;
                margin: 2px;
            }

            /* ── Form section header ── */
            .form-section-title {
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: #a1a5b7;
                margin-bottom: 16px;
                padding-bottom: 10px;
                border-bottom: 1px dashed #e4e6ef;
            }

            /* ── Avatar upload ── */
            .avatar-uploader {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 3px dashed #d0d5dd;
                background: #f9f9f9;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all .2s;
                overflow: hidden;
                margin: 0 auto;
            }

            .avatar-uploader:hover {
                border-color: #009ef7;
                background: #f0f9ff;
            }

            .avatar-uploader img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: none;
            }

            .stat-box {
                background: #fff;
                border: 1px solid #eff2f5;
                border-radius: 14px;
                padding: 18px 20px;
                display: flex;
                align-items: center;
                gap: 14px;
                box-shadow: 0 0 16px rgba(82, 63, 105, .05);
            }

            /* ── Password strength ── */
            .strength-bar {
                display: flex;
                gap: 4px;
                margin-top: 6px;
            }

            .strength-seg {
                height: 3px;
                flex: 1;
                border-radius: 2px;
                background: #e9ecef;
                transition: background .3s;
            }


            /* body{background:#f5f8fa} */
            

            /* ─── PROFILE COVER ─── */
            .profile-cover{
                background:linear-gradient(135deg,#0f111e 0%,#2c3158 50%,#0288d1 100%);
                border-radius:0px 0px 0 0;
                padding:48px 32px 0;
                position:relative;
                overflow:hidden;
                min-height:200px;
            }
            .profile-cover::before{
            content:'';position:absolute;top:-60px;right:-60px;
            width:280px;height:280px;border-radius:50%;
            background:rgba(255,255,255,.06);
            }
            .profile-cover::after{
            content:'';position:absolute;bottom:-80px;left:60px;
            width:200px;height:200px;border-radius:50%;
            background:rgba(255,255,255,.04);
            }
            .cover-pattern{
            position:absolute;inset:0;
            background-image:radial-gradient(circle at 20% 50%,rgba(255,255,255,.08) 0%,transparent 50%),
                repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(255,255,255,.02) 30px,rgba(255,255,255,.02) 31px);
            }

            /* ─── AVATAR ─── */
            .profile-avatar-wrap{
            position:relative;display:inline-block;
            margin-bottom:14px;
            }
            .profile-avatar{
            width:100px;height:100px;border-radius:20px;
            background:linear-gradient(135deg,#009ef7,#0077c8);
            display:flex;align-items:center;justify-content:center;
            font-size:32px;font-weight:800;color:#fff;
            border:4px solid #fff;
            box-shadow:0 8px 28px rgba(0,0,0,.2);
            position:relative;z-index:2;
            }
            

            /* ─── STAT MINI ─── */
            .stat-mini{
            background:#fff;border:1px solid #eff2f5;border-radius:12px;
            padding:16px 20px;text-align:center;
            box-shadow:0 0 12px rgba(82,63,105,.05);
            transition:all .2s;
            }
            .stat-mini:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(82,63,105,.1)}

            /* ─── SKILL BAR ─── */
            .skill-bar-bg{height:8px;border-radius:4px;background:#f1f3f8;overflow:hidden;margin-top:6px}
            .skill-bar-fill{height:100%;border-radius:4px;transition:width 1.2s cubic-bezier(.4,0,.2,1)}

            /* ─── TICKET ROW ITEM ─── */
            .ticket-row-item{
            display:flex;align-items:center;gap:12px;
            padding:12px 16px;border-radius:10px;
            border:1.5px solid #f1f3f8;
            margin-bottom:8px;transition:all .15s;cursor:pointer;
            }
            .ticket-row-item:hover{border-color:#009ef7;box-shadow:0 4px 14px rgba(0,158,247,.08)}

            /* ─── TIMELINE ─── */
            .timeline-entry{display:flex;gap:14px;position:relative}
            .timeline-entry:not(:last-child)::after{content:'';position:absolute;left:15px;top:34px;bottom:-10px;width:2px;background:#f1f3f8}
            .timeline-dot-line{width:2px;background:#f1f3f8}
            .tl-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}

            

            /* ─── REVIEW CARD ─── */
            .review-card{background:#f9f9f9;border:1.5px solid #f1f3f8;border-radius:12px;padding:16px;margin-bottom:10px}

            /* ─── PERFORMANCE RING ─── */
            .ring-wrap{position:relative;width:120px;height:120px;margin:0 auto}
            .ring-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}

            /* ─── CERTIFICATIONS ─── */
            .cert-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:1.5px solid #eff2f5;background:#fff;margin:4px;font-size:12px;font-weight:600;transition:all .2s}
            .cert-badge:hover{border-color:#009ef7;background:#f0f9ff}

            /* ─── NAV TABS ─── */
            .nav-line-tabs .nav-link{padding:12px 18px;font-size:13px;font-weight:600;color:#7e8299}
            .nav-line-tabs .nav-link.active{color:#009ef7;border-bottom:3px solid #009ef7}

            

            /* Week grid */
            .avail-week-grid{display:grid;grid-template-columns:64px repeat(7,1fr);gap:0;border:1px solid #eff2f5;border-radius:12px;overflow:hidden}

            .avail-grid-header{background:#f9f9f9;border-bottom:1px solid #eff2f5}

            .avail-day-col{border-left:1px solid #eff2f5}

            .avail-hour-label{border-bottom:1px solid #eff2f5;display:flex;align-items:flex-start;justify-content:flex-end;padding:4px 8px 0 0}

            .avail-slot{border-bottom:1px solid #eff2f5;min-height:36px;position:relative;transition:background .15s;cursor:pointer}
            .avail-slot:hover{background:rgba(0,158,247,.04)}

            /* Slot block */
            .slot-block{
                position:absolute;
                left:3px;
                right:3px;
                border-radius:6px;
                padding:6px 6px;
                font-size:10px;
                font-weight:700;
                z-index:2;
                cursor:pointer;
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
                transition:filter .15s;
                margin-top: 3px;
            }
            .slot-block:hover{filter:brightness(.94)}
            .slot-available{background:#e8fff3;color:#47be7d;border:1.5px solid #c7f3dc}
            .slot-busy{background:#fff5f8;color:#f1416c;border:1.5px solid #ffd6e0}
            .slot-break{background:#fffde7;color:#b07d00;border:1.5px solid #ffe082}
            .slot-leave{background:#f5f5f5;color:#a1a5b7;border:1.5px solid #e4e6ef}
            

            /* Status pill */
            .status-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:50px;font-size:11.5px;font-weight:700}
            .status-online{background:#e8fff3;color:#47be7d}
            .status-busy{background:#fff5f8;color:#f1416c}
            .status-break{background:#fffde7;color:#b07d00}
            .status-offline{background:#f5f5f5;color:#a1a5b7}
            

            /* Shift bar */
            .shift-bar-bg{height:8px;border-radius:4px;background:#f1f3f8;overflow:hidden;position:relative}
            .shift-bar-fill{height:100%;border-radius:4px;position:absolute;top:0}

            /* Review card */
            .review-card{background:#f9f9f9;border:1.5px solid #f1f3f8;border-radius:12px;padding:14px;margin-bottom:10px}

            /* Skill bar */
            .skill-bar-bg{height:7px;border-radius:4px;background:#f1f3f8;overflow:hidden;flex:1}
            .skill-bar-fill{height:100%;border-radius:4px}

            /* Calendar day */
            .cal-day{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s}
            .cal-day:hover{background:#f0f9ff;color:#009ef7}
            .cal-day.today{background:#009ef7;color:#fff!important}
            .cal-day.has-leave{background:#fff5f8;color:#f1416c}
            .cal-day.weekend{color:#a1a5b7}

            /* Ticket row */
            .ticket-row-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;background:#f9f9f9;border:1.5px solid #f1f3f8;margin-bottom:8px;transition:all .15s;cursor:pointer}
            .ticket-row-item:hover{border-color:#009ef7;box-shadow:0 4px 14px rgba(0,158,247,.08)}

            /* Override to make preview card full width */
            .card.card-flush{border-radius:16px}

/* Technician page end */

/* User page */

.section-tab.active {
          color: #009ef7;
          border-bottom-color: #009ef7
        }

        .section-panel {
          display: none;
          animation: fadeUp .3s ease
        }

        .section-panel.active {
          display: block
        }
        /* ── Req card ── */
        .req-card {
          /* background: #fff; */
          border: 1.5px solid #eff2f5;
          border-radius: 12px;
          padding: 16px 18px;
          transition: all .15s
        }

        .req-card:hover {
          border-color: #009ef7;
          box-shadow: 0 4px 16px rgba(0, 158, 247, .1)
        }

        /* ── Ticket history row ── */
        .ticket-hist-row {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px 14px;
          border-radius: 10px;
          background: #f9f9f9;
          border: 1.5px solid #f1f3f8;
          margin-bottom: 8px;
          cursor: pointer;
          transition: all .15s
        }

        .ticket-hist-row:hover {
          border-color: #009ef7;
          box-shadow: 0 4px 12px rgba(0, 158, 247, .08)
        }

        /* ── User detail field ── */
        .user-detail-field {
          background: #f9f9f9;
          border: 1.5px solid #f1f3f8;
          border-radius: 9px;
          padding: 9px 13px;
          font-size: 13px;
          font-weight: 600;
          color: #3f4254
        }

        .user-detail-label {
          font-size: 10px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: .9px;
          color: #a1a5b7;
          margin-bottom: 5px
        }

        

        /* ── Stepper (add user) ── */
        

        .add-step-wrap {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 5px
        }

        .stepper-dot {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
          font-weight: 700;
          transition: all .3s;
          border: 2px solid #f1f3f8;
          background: #fff
        }

        .stepper-dot.active {
          background: #009ef7;
          color: #fff;
          border-color: #009ef7;
          box-shadow: 0 0 0 4px rgba(0, 158, 247, .15)
        }

        .stepper-dot.done {
          background: #50cd89;
          color: #fff;
          border-color: #50cd89
        }

        .stepper-dot.idle {
          background: #f9f9f9;
          color: #a1a5b7
        }

        .stepper-line {
          width: 52px;
          height: 2px;
          background: #f1f3f8;
          margin-bottom: 18px;
          flex-shrink: 0
        }

        .stepper-line.done {
          background: #50cd89
        }

        .step-label {
          font-size: 10px;
          font-weight: 700;
          color: #a1a5b7;
          white-space: nowrap;
          text-align: center
        }

        .step-label.active {
          color: #009ef7
        }

        .step-label.done {
          color: #50cd89
        }

        .add-step-panel {
          display: none;
          animation: fadeUp .3s ease
        }

        .add-step-panel.active {
          display: block
        }

        /* ── Transfer modal ── */
        .plant-option {
          border: 2px solid #f1f3f8;
          border-radius: 12px;
          padding: 14px;
          cursor: pointer;
          transition: all .2s;
          text-align: center
        }

        .plant-option:hover {
          border-color: #009ef7;
          background: #f0f9ff
        }

        .plant-option.selected {
          border-color: #009ef7;
          background: #f0f9ff;
          box-shadow: 0 0 0 3px rgba(0, 158, 247, .15)
        }

        /* Misc */
        .kpi-strip {
          background: #fff;
          border: 1px solid #eff2f5;
          border-radius: 12px;
          padding: 16px 20px;
          box-shadow: 0 0 12px rgba(82, 63, 105, .05);
          text-align: center;
          transition: all .2s
        }

        .kpi-strip:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(82, 63, 105, .1)
        }

        .card-title .active {
            --bs-border-opacity: 1 !important;
            border-bottom: 6px var(--bs-border-style) var(--bs-border-color) !important;
            border-color: var(--bs-primary) !important;
            color: var(--bs-text-dark) !important;
        }

/* User page end */


@media (max-width: 750px) {
    .m-d-block {
        display: block !important;
    }
    .m-d-contents{
        display: contents !important;
    }
    .m-w-100 {
        width: 100% !important;
    }
    .m-left{
        float: left !important;
    }
    .m-mt-10{
        margin-top: 10px !important;
    }
}