From 142f967d3f2af16798225398b0e372361eccb4ca Mon Sep 17 00:00:00 2001
From: vadivelJ96 <jvadivel.1996@gmail.com>
Date: Mon, 1 Sep 2025 17:36:42 +0530
Subject: [PATCH] CHANGE_UI_FIX - VADIVEL J 2025-09-01

---
 app/Views/layout/header.php | 872 +++++++++++++++++-------------------
 1 file changed, 407 insertions(+), 465 deletions(-)

diff --git a/app/Views/layout/header.php b/app/Views/layout/header.php
index 4641383b..7da54833 100755
--- a/app/Views/layout/header.php
+++ b/app/Views/layout/header.php
@@ -96,12 +96,126 @@
 
     <!-- <script src="<?= base_url('public/unlayer/js/embed.js') . '' ?>"></script> -->
     <!-- srinivas -->
+  
+
+    <script>
+        $(window).on('load', function() {
+            setTimeout(function() {
+                $('.loader').fadeOut();
+                $('.loader-mask').fadeOut('slow');
+            }, 1000);
+        });
+    </script>
+
+
+    <!-- Global section starts -->
     <style>
 
+        *{
+             font-family: 'Poppins' !important;
+        }
 
-/********************************************************************* Dashboard-tab section starts ***********************************************************************************************************/
+        body{
+            margin-top:20px;
+            background:#FAFAFA;
+        }
 
-        /* dashboard-tab specific styling which is also used in many place in application  */
+        .content{
+            min-height: 70vh;
+        }
+
+        .tooltip-inner {
+            color: #fff !important;   /* restore white text */
+            background-color: #000 !important; /* keep background black */
+        }
+
+    </style>
+
+    <!-- navbar -->
+    <style>
+        
+        .ul-flex{
+            display:flex;
+            flex-flow: column nowrap;
+            justify-content: center;
+            align-content: space-evenly;
+        }
+
+        .top-navbar-div{
+            display:flex;
+            flex-flow:row nowrap;
+            justify-content:space-between;
+        }
+
+        .nav-flex{
+             display:flex;
+            flex-flow: row nowrap;
+            justify-content:end;
+            justify-content: center;
+            align-items: center;
+            margin-right:20px;
+        }
+    </style>
+
+    <!-- sidebar -->
+    <style>
+        #side-menu .menu-logo a:hover {
+            background-color: transparent !important;
+            color: inherit !important;
+            text-decoration: none !important;
+            box-shadow: none !important;
+        }
+
+
+        #side-menu .menu-logo img {
+            height: 24px ;
+            display: inline-block ;
+        }
+
+        .left-side-menu{
+            margin-left:30px; 
+            margin-top:20px;
+            margin-bottom:5px;
+            border-radius:25px;
+            background-color:#D4F5F6;
+            z-index:700;
+            padding:0px !important;
+            height:90%;
+        }
+    </style>
+
+    <!-- rightbar -->
+    <style>
+        .right-bar {
+            width: 300px;
+            /* Adjust as needed */
+            overflow: hidden;
+        }
+    </style>
+
+    <!-- Dashboard-tab and header section starts -->
+    <style>
+
+        .notification-dot {
+            position: absolute;
+            top: 5px;   /* adjust depending on icon size */
+            right: 8px; /* adjust depending on icon size */
+            width: 8px;
+            height: 8px;
+            background: red;
+            border-radius: 50%;
+        }
+
+        .dash-tab-font{
+            font-weight: 500 !important;
+            font-size:0.875rem !important;  
+        }
+
+        
+        #current_tile , #main_tile , #mainMenuTiles{
+            font-size: 25px!important;
+            font-weight: 600!important;
+        }
 
         .nav-link{
             color:black !important;
@@ -138,10 +252,6 @@
             margin-left: 20px;
         }
 
-
-
-        
-
         .navbar-custom {
             top: -10px !important;
             height: 61px !important;
@@ -166,11 +276,30 @@
             }
         }
 
+    </style>
 
+    <!-- loader section starts   -->
+    <style>
 
-/********************************************************************* loader section starts ***********************************************************************************************************/
-    /* Datatable footer styles */
-        /* loaders for whole application */
+        .loader div {
+            background-color: #6ad9cf;
+            display: inline-block;
+            float: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 50px;
+            height: 50px;
+            opacity: .5;
+            border-radius: 50%;
+            -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
+            animation: ballPulseDouble 2s ease-in-out infinite;
+        }
+
+        .loader div:last-child {
+            -webkit-animation-delay: -1s;
+            animation-delay: -1s;
+        }
 
         .loader-mask {
             position: fixed;
@@ -199,11 +328,10 @@
         }
 
         /* end of loaders */
+    </style>
 
-/********************************************************************* parsley-examples section starts ***********************************************************************************************************/
-    /* Datatable footer styles */
-        /* parsley-examples  */
-        
+    <!-- parsley-examples section starts  -->
+    <style>        
         .parsley-examples 
         {
             background-color: #F5FFFF;
@@ -214,389 +342,23 @@
             box-shadow: 0px 1px 1px 0px #00000040;
         }
 
-
-
-
-        /* all input elements */
-        input, select, 
-        .select2-container .select2-selection {
-            border-radius: 10px !important;
-            box-shadow: 0px 2px 4px 0px #00000024 !important;
-        }
-
-        /* allinput elements */
-
-
-        /* card-body */
-        .card-body{
-            color:#000;
-        }
-
-
-
-
-
-
-        .lead {
-            font-size: 13px;
-        }
-
-        .loader div {
-            background-color: #6ad9cf;
-            display: inline-block;
-            float: none;
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 50px;
-            height: 50px;
-            opacity: .5;
-            border-radius: 50%;
-            -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
-            animation: ballPulseDouble 2s ease-in-out infinite;
-        }
-
-        .loader div:last-child {
-            -webkit-animation-delay: -1s;
-            animation-delay: -1s;
-        }
-
-        @-webkit-keyframes ballPulseDouble {
-
-            0%,
-            100% {
-                -webkit-transform: scale(0);
-                transform: scale(0);
-            }
-
-            50% {
-                -webkit-transform: scale(1);
-                transform: scale(1);
-            }
-        }
-
-        @keyframes ballPulseDouble {
-
-            0%,
-            100% {
-                -webkit-transform: scale(0);
-                transform: scale(0);
-            }
-
-            50% {
-                -webkit-transform: scale(1);
-                transform: scale(1);
-            }
-        }
-
-        .toast-success {
-            background-color: #009688 !important;
-            color: #FFFFFF !important;
-        }
-
-
-        .dataTables_wrapper .dt-buttons .buttons-csv,
-        .dataTables_wrapper .dt-buttons .buttons-html5 {
-            background-color: #02a8b5;
-            color: #fff;
-            border-color: #02a8b5;
-        }
-
-        .dataTables_wrapper .dt-buttons .buttons-csv:hover,
-        .dataTables_wrapper .dt-buttons .buttons-html5:hover {
-            background-color: #028291;
-            border-color: #028291;
-        }
-
-
-        .modal-full-width {
-            width: 80% !important;
-            /* width: 95% !important; */
-            /* max-width: none; */
-        }
-
-        .modal-body {
-            /* position: relative;
-                flex: 1 1 auto; */
-            padding: 2rem !important;
-        }
-
-        /* Force all text across the entire app to black */
-        html, body, * {
-            /* color: #000 !important; */
-        }
-
-
     </style>
 
+    <!-- ticket list specific code -->
     <style>
-        .text-danger-2 {
-            font-style: italic;
-            color: black !important;
-            /* color: #02a8b5 !important; */
-            font-size: 12px;
-        }
+        /*
+        #E26728   (base)
+        #B8521F   (darker 1)
+        #9C461B   (darker 2)
+        #803A16   (darker 3)
+        rgba(226, 103, 40, 0.5)  (transparent)
 
-        /* .form-group {
-                margin-bottom: -0.2rem !important;
-            }
-            .form-row{
-                width: 84%;
-            } */
-    </style>
-
-    <style>
-        .select2-container--default .select2-selection--single {
-            height: 37px !important;
-        }
-
-        .select2-container--default .select2-selection--single .select2-selection__rendered {
-            line-height: 35px !important;
-        }
-
-        .select2-container--default .select2-selection--single .select2-selection__arrow {
-            top: 7px !important;
-        }
-    </style>
-
-    <style>
-        .toast-body {
-            padding: .75rem;
-            background: aliceblue !important;
-        }
-
-        #messages-list li {
-            margin-top: 0;
-            margin-bottom: -25px;
-            /* Adjust this value to reduce the space */
-        }
-
-        .toast-footer {
-            text-align: right;
-            color: #000;
-            border-top: 1px solid aliceblue;
-            margin-top: 11px;
-            margin-bottom: -6px;
-        }
-
-
-        .right-bar {
-            width: 300px;
-            /* Adjust as needed */
-            overflow: hidden;
-        }
-
-        .fixed-header {
-            position: relative;
-            top: 0;
-            z-index: 1000;
-            background-color: #f8f9fa !important;
-        }
-
-        .scrollable-content {
-            max-height: 42vh;
-            overflow-y: auto;
-            padding-top: 0px;
-        }
-
-        /* Additional styles to enhance appearance */
-        .header-title {
-            position: relative;
-            bottom: 5px;
-            left: 60px;
-        }
-
-        #app_content_management:hover {
-            color: red;
-        }
-    </style>
-
-    <style>
-
-        #side-menu .menu-logo a:hover {
-            background-color: transparent !important;
-            color: inherit !important;
-            text-decoration: none !important;
-            box-shadow: none !important;
-        }
-
-
-        #side-menu .menu-logo img {
-            height: 24px ;
-            display: inline-block ;
-        }
-
-        .ul-flex{
-            display:flex;
-            flex-flow: column nowrap;
-            justify-content: center;
-            align-content: space-evenly;
-        }
-
-        .top-navbar-div{
-            display:flex;
-            flex-flow:row nowrap;
-            justify-content:space-between;
-        }
-
-        .nav-flex{
-             display:flex;
-            flex-flow: row nowrap;
-            justify-content:end;
-            justify-content: center;
-            align-items: center;
-            margin-right:20px;
-        }
-
-        .card-body{
-            background-color:white;
-            margin-top: 5px;
-        }
-
-        .content-page{
-            background-color: white !important;
-            color:white !important;
-            padding: 0px !important;
-        }
-
-        .footer{
-            background-color:white !important;
-            color:black;
-            margin: 30px !important;
-        }
-
-        html{
-            background-color: white !important;
-            color:white !important;
-        }
-
-        .footer{
-            margin-left:150px;
-            position:relative;
-        }
-
-        .left-side-menu{
-            margin-left:30px; 
-            margin-top:20px;
-            margin-bottom:5px;
-            border-radius:25px;
-            background-color:#D4F5F6;
-            z-index:700;
-            padding:0px !important;
-            height:90%;
-        }
-
-        label{
-            color:#000;
-        }
-
-        .search-bar {
-            position: relative;
-            width: 550px;
-           
-        }
-
-        .dropdown{
-             margin-right: 10px !important;
-        }
-
-        .search-bar input {
-            width: 100%;
-            padding-right: 40px; /* make space for the button */
-            border-radius: 10px !important;
-            background-color: #F4F4F4;
-            box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.2);
-            margin-bottom: 5px;
-        }
-
-        .search-btn {
-            position: absolute;
-            top: 50%;
-            right: 10px;
-            transform: translateY(-50%);
-        }
-
-
-
-    </style>
-
-    <style>
-    .notification-dot {
-        position: absolute;
-        top: 5px;   /* adjust depending on icon size */
-        right: 8px; /* adjust depending on icon size */
-        width: 8px;
-        height: 8px;
-        background: red;
-        border-radius: 50%;
-    }
-
-    </style>
-
-    <style>
-        body{
-            margin-top:20px;
-            background:#FAFAFA;
-        }
-    </style>
-
-    <script>
-        $(window).on('load', function() {
-            setTimeout(function() {
-                $('.loader').fadeOut();
-                $('.loader-mask').fadeOut('slow');
-            }, 1000);
-        });
-    </script>
-
-    <style>
-        .img-inactive{
-            background-color: white;
-            margin: 10px 12px;
-            border-radius: 5px;
-            border: 4px solid white;padding: 8px !important;
-            min-height: 43px !important;
-        }
-
-        .img-active{
-            background-color: #B7F0F2;
-            margin: 10px 12px;
-            border-radius: 5px;
-            border: 4px solid #00999E;padding: 8px !important;
-            min-height: 43px !important;
-        }
-    </style>
-
-    <style>
-        *{
-             font-family: 'Poppins' !important;
-        }
-        .content{
-            min-height: 70vh;
-        }
-        .tooltip-inner {
-            color: #fff !important;   /* restore white text */
-            background-color: #000 !important; /* keep background black */
-        }
-
-        #current_tile , #main_tile , #mainMenuTiles{
-            font-size: 25px!important;
-            font-weight: 600!important;
-        }
-
-/*
-#E26728   (base)
-#B8521F   (darker 1)
-#9C461B   (darker 2)
-#803A16   (darker 3)
-rgba(226, 103, 40, 0.5)  (transparent)
-
-#00999E   (base)
-#007A7E   (darker 1)
-#006C70   (darker 2)
-#005D61   (darker 3)
-rgba(0, 153, 158, 0.5)  (transparent)
-*/
+        #00999E   (base)
+        #007A7E   (darker 1)
+        #006C70   (darker 2)
+        #005D61   (darker 3)
+        rgba(0, 153, 158, 0.5)  (transparent)
+        */
 
 .app-field-grey {
     background-color: #ECECEC !important;
@@ -784,61 +546,115 @@ a.app-badge-secondary:focus, a.app-badge-secondary.focus {
     box-shadow: 0 0 0 0.15rem rgba(226, 103, 40, 0.5); }
 
 
-/********************************************************************* table section starts ***********************************************************************************************************/
-    /* Datatable footer styles */
 
-table[data-custom-table-css="table"] thead th {
-    background-color: #00999E;
-    color: #fff !important;
-    border-top: 0px solid #fff !important;
-    border-bottom: 0px solid #fff !important;
-    text-align: center;
-    vertical-align: middle;
-}
+    </style>
 
-table[data-custom-table-css="table"] tbody td {
-    background: #F5FFFF;   
-    padding: 12px;
-    border-top: 0px solid #fff !important;
-    border-bottom: 2px solid #C3EDEE !important;
-}
+    <!-- footer -->
+    <style>
+        .footer{
+            background-color:white !important;
+            color:black;
+            margin: 30px !important;
+        }
 
-table[data-custom-table-css="table"] thead th:first-child {
-    border-top-left-radius: 15px !important;
-    border-bottom-left-radius: 15px !important;
-}
-table[data-custom-table-css="table"] thead th:last-child {
-    border-top-right-radius: 15px !important;
-    border-bottom-right-radius: 15px !important;
-}
+        .footer{
+            margin-left:150px;
+            position:relative;
+        }
+    </style>
 
-table[data-custom-table-css="table"] tbody tr td:first-child {
-    border-top-left-radius: 15px !important;
-    border-bottom-left-radius: 15px !important;
-}
-table[data-custom-table-css="table"] tbody tr td:last-child {
-    border-top-right-radius: 15px !important;
-    border-bottom-right-radius: 15px !important;
-}
+    <!-- toaster -->
+    <style>
+        .toast-success {
+            background-color: #009688 !important;
+            color: #FFFFFF !important;
+        }
 
-table[data-custom-table-css="table"] tbody tr:hover td {
-    background-color: #e0e0e0;
-}
+        .toast-body {
+            padding: .75rem;
+            background: aliceblue !important;
+        }
 
-table[data-custom-table-css="table"] {
-   border-collapse: separate !important;
-   border-spacing: 0 8px !important;
-   width: 100%;
-}
+        .toast-footer {
+            text-align: right;
+            color: #000;
+            border-top: 1px solid aliceblue;
+            margin-top: 11px;
+            margin-bottom: -6px;
+        }
+    </style>
+
+    <!-- img active inactive -->
+    <style>
+        .img-inactive{
+            background-color: white;
+            margin: 10px 12px;
+            border-radius: 5px;
+            border: 4px solid white;padding: 8px !important;
+            min-height: 43px !important;
+        }
+
+        .img-active{
+            background-color: #B7F0F2;
+            margin: 10px 12px;
+            border-radius: 5px;
+            border: 4px solid #00999E;padding: 8px !important;
+            min-height: 43px !important;
+        }
+    </style>
+
+    <!-- table section starts -->
+    <style>
+
+    table[data-custom-table-css="table"] thead th {
+        background-color: #00999E;
+        color: #fff !important;
+        border-top: 0px solid #fff !important;
+        border-bottom: 0px solid #fff !important;
+        text-align: center;
+        vertical-align: middle;
+    }
+
+    table[data-custom-table-css="table"] tbody td {
+        background: #F5FFFF;   
+        padding: 12px;
+        border-top: 0px solid #fff !important;
+        border-bottom: 2px solid #C3EDEE !important;
+    }
+
+    table[data-custom-table-css="table"] thead th:first-child {
+        border-top-left-radius: 15px !important;
+        border-bottom-left-radius: 15px !important;
+    }
+    table[data-custom-table-css="table"] thead th:last-child {
+        border-top-right-radius: 15px !important;
+        border-bottom-right-radius: 15px !important;
+    }
+
+    table[data-custom-table-css="table"] tbody tr td:first-child {
+        border-top-left-radius: 15px !important;
+        border-bottom-left-radius: 15px !important;
+    }
+    table[data-custom-table-css="table"] tbody tr td:last-child {
+        border-top-right-radius: 15px !important;
+        border-bottom-right-radius: 15px !important;
+    }
+
+    table[data-custom-table-css="table"] tbody tr:hover td {
+        background-color: #e0e0e0;
+    }
+
+    table[data-custom-table-css="table"] {
+    border-collapse: separate !important;
+    border-spacing: 0 8px !important;
+    width: 100%;
+    }
 
 
+    </style>
 
-
-
-
-
-/********************************************************************* Datatable section starts ***********************************************************************************************************/
-    /* Datatable footer styles */
+    <!-- Datatable section starts  -->
+    <style>
 
         /* Pagination buttons */
         .dataTables_wrapper .dataTables_paginate .paginate_button {
@@ -888,41 +704,38 @@ table[data-custom-table-css="table"] {
             font-size: 12px;
         }
 
-
-
-
-
-
-
-    </style>
-    
-    <style>
-        
-        label{
-            font-weight: 500 !important;
-            font-size:0.875rem !important;
+        .dataTables_wrapper .dt-buttons .buttons-csv,
+        .dataTables_wrapper .dt-buttons .buttons-html5 {
+            background-color: #02a8b5;
+            color: #fff;
+            border-color: #02a8b5;
         }
+
+        .dataTables_wrapper .dt-buttons .buttons-csv:hover,
+        .dataTables_wrapper .dt-buttons .buttons-html5:hover {
+            background-color: #028291;
+            border-color: #028291;
+        }
+
         .dataTables_info , .text , #client_logo{
             font-weight: 500 !important;
             color:#000 !important;
         }
-        .right-bar{
-            right : -300px;
-        }
-        .dash-tab-font{
-            font-weight: 500 !important;
-            font-size:0.875rem !important;  
-        }
+    </style>
 
-        .jodit-wysiwyg{
-            color:black;
-        }
 
-         /********************************************************************* modal section starts ***********************************************************************************************************/
-      
+    <!-- modal section -->
+    <style>
         /* Inside modal field color changes */
         /* modal section starts */
 
+        .modal-full-width {
+            width: 80% !important;
+        }
+
+        .modal-body {
+            padding: 2rem !important;
+        }
 
         .modal.show .modal-dialog .modal-content,
         .modal .modal-dialog .modal-content {
@@ -1051,13 +864,49 @@ table[data-custom-table-css="table"] {
         .modal .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
             background-color: #00999E !important;
         }
+    </style>
 
 
+    <!-- jodit section -->
+    <style>
+        /********************************************************************* jodit section starts ***********************************************************************************************************/
+
+         .jodit-wysiwyg{
+            color:black;
+        }
+    </style>
 
 
+    <!-- specific tag section starts -->
+    <style>
+        
+        label{
+            font-weight: 500 !important;
+            font-size:0.875rem !important;
+             color:#000;
+        }
 
-        /********************************************************************* button section starts ***********************************************************************************************************/
-       
+        .right-bar{
+            right : -300px;
+        }
+
+        .select2-container--default .select2-selection--single {
+            height: 37px !important;
+        }
+
+        .select2-container--default .select2-selection--single .select2-selection__rendered {
+            line-height: 35px !important;
+        }
+
+        .select2-container--default .select2-selection--single .select2-selection__arrow {
+            top: 7px !important;
+        }
+
+    </style>
+
+
+    <!-- button section starts -->
+    <style>
         /* Target only buttons with type="submit" */
 
         button[type="submit"],
@@ -1082,6 +931,99 @@ table[data-custom-table-css="table"] {
 
     </style>
 
+    <!-- legacy styles of random style applied -->
+    <style>
+
+        .card-body{
+            background-color:white;
+            margin-top: 5px;
+        }
+
+        .content-page{
+            background-color: white !important;
+            color:white !important;
+            padding: 0px !important;
+        }
+
+
+       .dropdown{
+             margin-right: 10px !important;
+        }
+
+        .text-danger-2 {
+            font-style: italic;
+            color: black !important;
+            /* color: #02a8b5 !important; */
+            font-size: 12px;
+        }
+
+        #messages-list li {
+            margin-top: 0;
+            margin-bottom: -25px;
+            /* Adjust this value to reduce the space */
+        }
+
+        .fixed-header {
+            position: relative;
+            top: 0;
+            z-index: 1000;
+            background-color: #f8f9fa !important;
+        }
+
+        .scrollable-content {
+            max-height: 42vh;
+            overflow-y: auto;
+            padding-top: 0px;
+        }
+
+        /* Additional styles to enhance appearance */
+        .header-title {
+            position: relative;
+            bottom: 5px;
+            left: 60px;
+        }
+
+        #app_content_management:hover {
+            color: red;
+        }
+
+        .lead {
+            font-size: 13px;
+        }
+
+
+
+        @-webkit-keyframes ballPulseDouble {
+
+            0%,
+            100% {
+                -webkit-transform: scale(0);
+                transform: scale(0);
+            }
+
+            50% {
+                -webkit-transform: scale(1);
+                transform: scale(1);
+            }
+        }
+
+        @keyframes ballPulseDouble {
+
+            0%,
+            100% {
+                -webkit-transform: scale(0);
+                transform: scale(0);
+            }
+
+            50% {
+                -webkit-transform: scale(1);
+                transform: scale(1);
+            }
+        }
+
+
+    </style>
+
 
 
 </head>