/*dashboard page */

:root {

    --pyp-teal: #124948;

    --pyp-sage: #9DB1AE;

    --pyp-gray: #CFCFCF;

    --pyp-bg: #F7F9FA;

    --pyp-text: #101C1F;

    --pyp-muted: #6E7D82;



    --pyp-font: Inter, system-ui, -apple-system, BlinkMacSystemFont,

        "Segoe UI", Roboto, Arial, sans-serif;



    --pyp-radius: 22px;

    --pyp-radius-sm: 14px;

    --pyp-shadow: 0 14px 40px rgba(16, 28, 31, .10);

}



* {
    box-sizing: border-box;
}



body {

    margin: 0;

    font-family: var(--pyp-font);

    background: var(--pyp-bg);

    color: var(--pyp-text);

}



/* ===== Overlay (mobile) ===== */

.pyp-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .45);

    display: none;

    z-index: 9998;

}

.pyp-overlay.is-open {
    display: block;
}



/* ===== Layout ===== */

.pyp-shell {

    min-height: 100vh;

    display: grid;

    grid-template-columns: 296px 1fr;

    gap: 24px;

    padding: 24px;

}



/* ===== Sidebar ===== */

.pyp-sidebar {

    background: #121618;

    border-radius: var(--pyp-radius);

    padding: 22px;

    position: sticky;

    top: 24px;

    height: calc(100vh - 48px);

    z-index: 9999;

    transition: left .25s ease;

    overflow: auto;

}



.pyp-sidebar__top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;

}



.pyp-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #fff;

    font-weight: 900;

}



.pyp-brand img {

   

    width: 100%;

    display: block;

}



.pyp-brand span {

    opacity: .9;

    font-weight: 800;

}



.pyp-close {

    display: none;

    border: 0;

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

    color: #fff;

    width: 40px;

    height: 40px;

    border-radius: 14px;

    font-size: 18px;

    cursor: pointer;

}



.pyp-nav {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 12px;

}



.pyp-nav a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    border-radius: 14px;

    text-decoration: none;

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

}



.pyp-nav a:hover {
    background: rgba(255, 255, 255, .08);
}



.pyp-nav a.is-active {

    background: var(--pyp-teal);

    color: #fff;

}



.pyp-ico {

    width: 28px;

    height: 28px;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

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

    font-size: 14px;

}



.pyp-sidebar__footer {

    margin-top: 18px;

    padding-top: 16px;

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

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

    font-size: 13px;

}



.pyp-sidebar__footer a {

    color: #fff;

    font-weight: 800;

    text-decoration: none;

}



/* ===== Main ===== */

.pyp-main {

    display: flex;

    flex-direction: column;

    gap: 18px;

    min-width: 0;

}



/* ===== Topbar ===== */

.pyp-topbar {

    background: #fff;

    border-radius: var(--pyp-radius);

    box-shadow: 0 10px 30px rgba(16, 28, 31, .08);

    padding: 16px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

}



.pyp-left {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}



.pyp-burger {

    display: none;

    border: 0;

    background: #F0F3F4;

    border-radius: 14px;

    height: 40px;

    width: 44px;

    cursor: pointer;

    font-size: 18px;

}



.pyp-title {

    margin: 0;

    font-size: 22px;

    font-weight: 900;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.pyp-top-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}



.pyp-user__pill {

    background: #F0F3F4;

    border-radius: 999px;

    padding: 10px 14px;

    font-weight: 800;

    white-space: nowrap;

}



/* ===== Buttons ===== */

.pyp-btn {

    border: none;

    border-radius: 999px;

    padding: 10px 16px;

    font-weight: 900;

    cursor: pointer;

    font-size: 14px;

    white-space: nowrap;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.pyp-btn--primary {

    background: var(--pyp-teal);

    color: #fff;

}

.pyp-btn--primary:hover {
    filter: brightness(1.05);
}



.pyp-btn--ghost {

    background: #F0F3F4;

    color: var(--pyp-text);

}



/* ===== Card / Form Layout ===== */

.pyp-card {

    background: #fff;

    border-radius: var(--pyp-radius);

    box-shadow: var(--pyp-shadow);

    padding: 22px;

}



.pyp-page {

    display: grid;

    grid-template-columns: 1.6fr .9fr;

    gap: 18px;

}



.pyp-card h2 {

    margin: 0 0 6px;

    font-size: 18px;

    letter-spacing: -.01em;

}



.pyp-sub {

    margin: 0 0 16px;

    color: var(--pyp-muted);

    font-size: 14px;

    line-height: 1.5;

}



/* ===== Stepper ===== */

.pyp-stepper {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-bottom: 16px;

}



.pyp-step {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 900;

    font-size: 13px;

    color: var(--pyp-muted);

}



.pyp-dot {

    width: 28px;

    height: 28px;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #F0F3F4;

    border: 2px solid #E6EAEC;

    color: var(--pyp-muted);

    font-weight: 900;

}



.pyp-step.is-active {
    color: var(--pyp-text);
}

.pyp-step.is-active .pyp-dot {

    background: var(--pyp-teal);

    border-color: var(--pyp-teal);

    color: #fff;

}



.pyp-line {

    width: 28px;

    height: 2px;

    background: #E6EAEC;

}



/* ===== Fields ===== */

.pyp-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

}



.pyp-field {
    margin-top: 14px;
}

.pyp-field label {

    display: block;

    font-weight: 900;

    font-size: 13px;

    color: #3C4B4F;

    margin-bottom: 8px;

}



.pyp-input,
.pyp-select,
.pyp-textarea {

    width: 100%;

    padding: 12px 14px;

    border-radius: 14px;

    border: 2px solid var(--pyp-gray);

    background: #F8FAFA;

    outline: none;

    font-size: 14px;

    color: var(--pyp-text);

}



.pyp-textarea {

    min-height: 120px;

    resize: vertical;

}



.pyp-input:focus,
.pyp-select:focus,
.pyp-textarea:focus {

    border-color: rgba(18, 73, 72, .6);

    box-shadow: 0 0 0 4px rgba(18, 73, 72, .12);

}



/* ===== Segmented control ===== */

.pyp-seg {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.pyp-seg label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 14px;

    border-radius: 999px;

    border: 2px solid #E6EAEC;

    background: #F0F3F4;

    cursor: pointer;

    font-weight: 900;

    font-size: 13px;

    color: var(--pyp-text);

    margin: 0;

}



.pyp-seg input {
    display: none;
}



.pyp-seg input:checked+span {

    background: var(--pyp-teal);

    border-color: var(--pyp-teal);

    color: #fff;

    padding: 10px 14px;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

}



/* Because we used input + span trick, wrap text inside span */

.pyp-seg span {

    display: inline-flex;

    align-items: center;

    gap: 10px;

}



/* ===== File drop ===== */

.pyp-drop {

    border: 2px dashed #D6DDE0;

    background: #FBFCFC;

    border-radius: 18px;

    padding: 16px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    color: var(--pyp-muted);

    font-size: 13px;

}



.pyp-drop strong {
    color: var(--pyp-text);
}



/* ===== Right Tips Card ===== */

.pyp-tips {

    background: #F5F7F8;

    border-radius: var(--pyp-radius);

    padding: 20px;

}



.pyp-tips h3 {

    margin: 0 0 10px;

    font-size: 16px;

}



.pyp-tip {

    display: flex;

    gap: 10px;

    margin: 12px 0;

    color: var(--pyp-muted);

    font-size: 14px;

    line-height: 1.45;

}



.pyp-bullet {

    width: 10px;
    height: 10px;

    border-radius: 999px;

    background: var(--pyp-teal);

    margin-top: 6px;

    flex: 0 0 auto;

}



/* ===== Footer buttons ===== */

.pyp-form-actions {

    margin-top: 18px;

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    flex-wrap: wrap;

}



/* ===== Mobile ===== */

@media(max-width:980px) {

    .pyp-shell {

        grid-template-columns: 1fr;

        padding: 18px;

    }



    .pyp-sidebar {

        position: fixed;

        left: -340px;

        top: 18px;

        bottom: 18px;

        height: auto;

        width: 296px;

    }



    .pyp-sidebar.is-open {
        left: 18px;
    }



    .pyp-burger {
        display: inline-flex;
    }

    .pyp-close {

        display: inline-flex;

        align-items: center;

        justify-content: center;

    }



    .pyp-page {

        grid-template-columns: 1fr;

    }



    .pyp-grid {

        grid-template-columns: 1fr;

    }

}


/****************** Login Page ***************/

 :root {

            --pyp-teal: #124948;

            --pyp-sage: #9DB1AE;

            --pyp-bg: #F7F9FA;

            --pyp-text: #101C1F;

            --pyp-muted: #6E7D82;

            --pyp-gray: #CFCFCF;



            --pyp-font: Inter, system-ui, -apple-system, BlinkMacSystemFont,

                "Segoe UI", Roboto, Arial, sans-serif;



            --pyp-shadow: 0 14px 40px rgba(16, 28, 31, .10);

        }



        * {
            box-sizing: border-box;
        }



        body {

            margin: 0;

            font-family: var(--pyp-font);

            background: var(--pyp-bg);

            color: var(--pyp-text);

        }



        /* ===== Layout ===== */

        .pyp-auth {

            min-height: 100vh;

            display: grid;

            grid-template-columns: 1.1fr 1fr;

        }



        /* ===== Brand Panel ===== */

        .pyp-auth__brand {

            background: linear-gradient(135deg,

                    #124948 0%,

                    #124948 55%,

                    #9DB1AE 100%);

            color: #fff;

            padding: 80px;

            display: flex;

            flex-direction: column;

            justify-content: center;

        }



        /* ===== Logo Badge ===== */

        .pyp-logo-badge {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            padding: 14px 18px;

            border-radius: 16px;



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

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

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



            width: fit-content;

            margin-bottom: 36px;

        }



        .pyp-logo {

            display: block;

            max-height: 64px;

            max-width: 280px;

            width: auto;

            height: auto;

            object-fit: contain;

        }



        .pyp-auth__brand h1 {

            font-size: 44px;

            margin: 0 0 16px;

            letter-spacing: -.02em;

        }



        .pyp-auth__brand p {

            font-size: 16px;

            line-height: 1.65;

            max-width: 440px;

            opacity: .95;

        }



        /* ===== Login Panel ===== */

        .pyp-auth__panel {

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 48px;

        }



        #login .pyp-card {

            width: 100%;

            max-width: 520px;

            background: #fff;

            border-radius: 22px;

            box-shadow: var(--pyp-shadow);

            padding: 46px;

        }



        .pyp-card h2 {

            font-size: 32px;

            margin: 0 0 8px;

        }



        .pyp-subtitle {

            margin: 0 0 28px;

            color: var(--pyp-muted);

            font-size: 15px;

        }



        /* ===== Form ===== */

        label {

            display: block;

            font-weight: 700;

            font-size: 14px;

            margin-top: 18px;

            color: #3C4B4F;

        }



        input {

            width: 100%;

            padding: 14px 16px;

            margin-top: 8px;

            font-size: 16px;

            border-radius: 14px;

            border: 2px solid var(--pyp-gray);

            background: #F8FAFA;

            outline: none;

        }



        input:focus {

            border-color: rgba(18, 73, 72, .6);

            box-shadow: 0 0 0 4px rgba(18, 73, 72, .12);

        }



        .pyp-row {

            margin-top: 18px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 16px;

        }



        .pyp-check {

            display: flex;

            align-items: center;

            gap: 10px;

            font-size: 14px;

            color: var(--pyp-muted);

        }



        .pyp-check input {

            width: 16px;

            height: 16px;

            margin: 0;

        }



        .pyp-link {

            font-size: 14px;

            font-weight: 700;

            color: var(--pyp-teal);

            text-decoration: none;

        }



        .pyp-link:hover {
            text-decoration: underline;
        }



        /* ===== Button ===== */

        #login .pyp-btn {

            width: 100%;

            margin-top: 28px;

            padding: 14px;

            border-radius: 999px;

            border: none;

            font-size: 16px;

            font-weight: 800;

            cursor: pointer;

            background: var(--pyp-teal);

            color: #fff;

        }



        .pyp-btn:hover {
            filter: brightness(1.05);
        }



        /* ===== Responsive ===== */

        @media(max-width:900px) {

            .pyp-auth {

                grid-template-columns: 1fr;

            }

            .pyp-auth__brand {

                display: none;

            }

        }


        /***************** Dashboard ****/

        .pyp-card{
            background:#fff;
            border-radius:var(--pyp-radius);
            box-shadow:var(--pyp-shadow);
            padding:22px;
            min-width:0;
          }
      
          .pyp-card__head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:14px;
          }
      
          .pyp-card__head h2{
            margin:0;
            font-size:18px;
            letter-spacing:-.01em;
          }
      
          .pyp-actions{
            display:flex;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
          }
      
          .pyp-input{
            background:#F8FAFA;
            border:2px solid var(--pyp-gray);
            border-radius:14px;
            padding:12px 14px;
            font-size:15px;
            outline:none;
            width:min(420px, 100%);
          }
      
          .pyp-input:focus{
            border-color:rgba(18,73,72,.6);
            box-shadow:0 0 0 4px rgba(18,73,72,.12);
          }
      
          .pyp-btn{
            border:none;
            border-radius:999px;
            padding:12px 16px;
            font-weight:900;
            cursor:pointer;
            font-size:14px;
            white-space:nowrap;
          }
      
          .pyp-btn--primary{
            background:var(--pyp-teal);
            color:#fff;
          }
      
          .pyp-btn--primary:hover{
            filter:brightness(1.05);
          }
      
          /* ===== Stats ===== */
          .pyp-stats{
            display:grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap:14px;
            margin-bottom:16px;
          }
      
          .pyp-stat{
            border:2px solid #EBEEF0;
            border-radius:18px;
            padding:16px;
            background:#fff;
            min-width:0;
          }
      
          .pyp-stat .k{
            color:var(--pyp-muted);
            font-weight:800;
            font-size:13px;
            margin-bottom:10px;
          }
      
          .pyp-stat .v{
            font-size:28px;
            font-weight:900;
            letter-spacing:-.02em;
          }
      
          /* ===== Table ===== */
          .pyp-table{
            width:100%;
            display:flex;
            flex-direction:column;
            gap:10px;
          }
      
          .pyp-thead,
          .pyp-row{
            display:grid;
            grid-template-columns: 2.2fr .8fr 1fr 1fr .8fr;
            gap:12px;
            align-items:center;
          }
      
          .pyp-thead{
            background:#F5F7F8;
            border-radius:14px;
            padding:14px 16px;
            font-size:13px;
            font-weight:900;
            color:var(--pyp-muted);
          }
      
          .pyp-row{
            background:#fff;
            border:2px solid #EBEEF0;
            border-radius:14px;
            padding:16px;
            min-width:0;
          }
      
          .pyp-row strong{
            display:block;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
          }
      
          .pyp-row span{
            color:var(--pyp-muted);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
          }
      
          .pyp-status{
            display:inline-block;
            padding:7px 12px;
            border-radius:999px;
            font-style:normal;
            font-weight:900;
            font-size:13px;
            justify-self:start;
          }
      
          .pyp-status--open{
            background:#EAF6F5;
            color:var(--pyp-teal);
          }
      
          .pyp-status--in-progress{
            background:#FFF6E7;
            color:#A06E0A;
          }
      
          .pyp-status--closed{
            background:#EEF3FF;
            color:#2D46AA;
          }
          
          .status-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    line-height: 1;
}

/* Blue – informational */
.status-new {
    background: #e3f2fd;
    color: #1565c0;
}

/* Orange – waiting / paused */
.status-waiting {
    background: #fff3e0;
    color: #ef6c00;
}

/* Purple – active work */
.status-in-progress {
    background: #ede7f6;
    color: #5e35b1;
}

/* Red – stopped */
.status-canceled {
    background: #fdecea;
    color: #c62828;
}

/* Green – fixed */
.status-resolved {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Yellow – needs attention */
.status-under-review {
    background: #fffde7;
    color: #f9a825;
}

/* Teal – approved */
.status-approved {
    background: #e0f2f1;
    color: #00796b;
}

/* Grey – not started */
.status-backlog {
    background: #f5f5f5;
    color: #616161;
}

/* Indigo – building */
.status-in-development {
    background: #e8eaf6;
    color: #3949ab;
}

/* Dark green – finished */
.status-completed {
    background: #e6f4ea;
    color: #1b5e20;
}

/* Fallback */
.status-default {
    background: #eeeeee;
    color: #424242;
}
.status-closed {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    background: #ffe5e5;
    color: #c62828;
    border: 1px solid #f5b5b5;
    text-transform: uppercase;
    letter-spacing: .4px;
}


      
          /* ===== Mobile ===== */
          @media (max-width: 980px){
            .pyp-shell{
              grid-template-columns: 1fr;
              padding:18px;
            }
      
            .pyp-sidebar{
              position:fixed;
              left:-340px;
              top:18px;
              bottom:18px;
              height:auto;
              width:296px;
              z-index:9999;
              transition:left .2s ease;
            }
      
            .pyp-sidebar.is-open{ left:18px; }
      
            .pyp-burger{ display:inline-flex; align-items:center; justify-content:center; }
      
            .pyp-stats{
              grid-template-columns: 1fr;
            }
          }



.d-none{display: none;}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
}

.custom-table th,
.custom-table td {
    padding: 12px 14px;
    text-align: left;
    border: 1px solid #e5e7eb;
}

/* Header */
.custom-table thead th {
    background: #f8fafc;
    font-weight: 600;
    text-transform: capitalize;
}

/* Zebra rows */
.custom-table tbody tr:nth-child(even) {
    background: #f9fafb;
}

/* Hover effect */
.custom-table tbody tr:hover {
    background: #eef2ff;
}

/* Mobile friendly */
@media (max-width: 768px) {
    .custom-table {
        font-size: 13px;
    }
}

#frgtpss{display: flex !important;}
#loader {display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;background: rgba(0, 0, 0, 0.75) url('./loading.gif') no-repeat center center;z-index: 10000;}.view_pdf{cursor: pointer;}span.view_pdf.view_pdf_btn {color: cornflowerblue;}