* {margin: 0; padding: 0;}

body {
  background-color: #141f2d;
  font-family: Nunito, arial, verdana;
}

.naslov {
  font-size:27px;
  margin:15px 0px;
}

.naslov2 {
  font-size:27px;
  margin:15px 0px;
}


.grid-container {
  
  display: grid;
  grid-template-columns: 210px 1.1fr 1fr 1fr;
  grid-template-rows: 110px 0.3fr 2.6fr 0.4fr;
  gap: 0px 0px;
  grid-template-areas:
    "Top Top Top Top"
    "Left Dash Dash Dash"
    "Left Content Content Content"
    "Footer Footer Footer Footer";
}
.Top {
    

  display: grid;
  grid-template-columns: 210px 1.2fr 1fr;
  grid-template-rows: 0.9fr 1.1fr;
  gap: 0px 0px;
  grid-template-areas:
    "logo meteo profile"
    "logo navigare activity";
  grid-area: Top;
}

.logo {
    display: flex;
    align-items: center;
    padding-left: 16px;
    grid-area: logo; }
/* 2026-06-13: new CloudFran logo (vector). Size by height + auto width so the
   4:1 horizontal lockup renders proportionally in the legacy ~210x110 logo cell
   (the old logo was a 2:1 raster). The .logo cell sits in the dark navy .Top
   header band (siblings #191b30 / #141f2d).
   Brand single-source-of-truth (Task #174): the actual <img src>/<asp:Image
   ImageUrl> for this cell is Session["logo"] = the TENANT logo (white-label) or
   the official CloudFran lockup (cf-staff/default, Common/Brand.cs Official*).
   This rule only SIZES + plates the image; the path lives in page markup +
   SessionHelper.CANONICAL_LOGO. */
/* 2026-06-27 acarter (round8g header-logo): the default cf-staff lockup is now
   the OFFICIAL dark-ink lockup (legible on light), and white-label tenant logos
   can be any color, so on the DARK navy legacy header band we seat the logo on a
   clean white rounded plate (enterprise pattern). This makes BOTH the dark-ink
   default AND arbitrary tenant logos legible on the navy band, and reads as a
   polished brand chip rather than a bare image floated on dark. */
.logo img {
    height: 56px;
    width: auto;
    max-width: 188px;
    display: block;
    background: #ffffff;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    box-sizing: border-box;
}

.meteo { 
   

    grid-area: meteo; }

.profile { 
    background-color:#191b30;
    grid-area: profile; }

.navigare { 
    
     background-color:#141f2d;
     padding-top: 20px;
    grid-area: navigare; }

.activity { 
     background-color:#141f2d;
     padding-top: 15px;
    grid-area: activity; }

.Left { 
   
    
    grid-area: Left; }

.Footer {
    grid-area: Footer;
    /*       background-color:#191b30;

          border-style:solid;
    border-width:1px;
    border-color:black;
        */
    /* round8g (2026-06-27): "Powered by CloudFran" credit in the legacy
       (Styles.css-only) chrome footer. The legacy .Content band is dark
       navy (#252644), so use the white-safe TRANSPARENT official lockup +
       light credit text. font-size:0 collapses the stray "6" bare text node
       in the 14 pages that ship `<div class="Footer">6<asp:ScriptManager>`. */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    /* 2026-10-02 acarter: extra right padding so the right-aligned "Powered by
       CloudFran" lockup clears the bottom-right SuperAgent FAB (~74px @ right:20px)
       instead of being covered by it. */
    padding: 12px 110px 12px 22px;
    min-height: 42px;
    font-size: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
}
.Footer::before {
    content: "Powered by";
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    letter-spacing: .01em;
}
.Footer::after {
    content: "";
    display: inline-block;
    width: 124px;
    height: 26px;
    background-image: url("/Common/brand/official/CloudFran-logo-horizontal-transparent.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.Dash {

    background-color:#252644;
   

 /* display: grid; */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "minidash minidash minidash"
    "buttons buttons buttons";
  grid-area: Dash;
  height: 237px;
}

.minidash { 
     background-color:#252644;
   
    height: 140px;
    grid-area: minidash; }

.minidashCont
{ 
    margin:15px;
  
    text-align:center;
     background-color:#1d1f34;
     height:115px;
}

.buttons { grid-area: buttons;
           background-color:#252644;
 height: 100px;
}
.buttonsCont
{ 
    margin:20px;
    padding:12px 30px;
   
     text-align:left;
     background-color: #1d1f34;
     height: 69px;
}


.Content {
    grid-area: Content;
    /* 2026-07-21 acarter: a CSS-Grid item defaults to min-width:auto, so this
       column refused to shrink below the intrinsic width of whatever it holds.
       Any wide child (the .row card grid, a data table) pushed the whole
       .grid-container past the viewport, and centered children then lost BOTH
       edges to the overflow. min-width:0 lets the column take the width it
       actually has; wide children scroll inside their own container instead of
       dragging the page sideways. Fixes the Engage1 card-title clipping class. */
    min-width: 0;
    background-color: #252644;
  /*  height: 1967px;
    min-height: 1500px;
      */
}

.ContentCont {
    margin: 20px;
    padding: 12px 30px;
    text-align: left;
    background-color: white;
    height: auto;
    min-height: 1500px;
    line-height: 1.7;
    /*    height: 1900px;
    */

}

.filtersCont
{
    margin:0px;
   margin-bottom: 20px;
   padding:6px 0px;
     text-align:left;
     background-color: white;
     height: 50px;
     border-bottom-style:solid;
     border-bottom-width: 1px;
     border-bottom-color:gray;
}
.navigacija a
{
      
   text-decoration: none;
    font-size: 12px;
       
       margin-right: 5px;
       margin: 0px 5px;
}
.navigacija a:hover
{
      
   text-decoration: underline;
    font-size: 12px;
  
}
.navigacija 
{
       margin-left: 20px;
       font-size: 12px;
     
   text-decoration: none;
}

.Pretraga 
{
      float: right;
}

.Eksport 
{
      float: right;
}




#accordian {
    background: linear-gradient(to right,#051420, #0f102f);
    width: 210px;
    margin: 0px auto 0 auto;
    color: white;
    /*Some cool shadow and glow effect*/
    /*   box-shadow: 
        0 0 10px 1px rgba(0, 0, 0, .3)*/
}
/*heading styles*/
    : root {
--main-bg-color: coral;
}

#accordian h3 {
    font-size: 16px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
  /*   background: #191b30;   */

   background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
#accordian h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/*
#divA, #divB,  #divC,  #divD, #divE, #divF, #divG,:hover {
    */

#divA:hover, #divB:hover, #divC:hover, #divD:hover, #divE:hover, #divF:hover {
    background: linear-gradient(to right,#2b668c, #2b668c);
}

.belo {
        background-color:#fff !important;
  }



/*iconfont styles*/
#accordian h3 span {
    font-size: 16px;
    margin-right: 10px;
     
}

#accordian h3::before{ 
   
            content: "🔽"; 
          float:right;
          position:inherit;
          left: 190px;
            margin-right:7px;
            font-size: 10px;
   /*         margin-top: 8px;*/
            color: #507799;
        } 



/*list items*/
#accordian li {
    list-style-type: none;
 
}

/*links*/
#accordian ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    transition: all 0.15s;
}

/*hover effect on links*/
#accordian ul ul li a:hover {
    background: #003545;
    border-left: 5px solid lightgreen;
}

/*Lets hide the non active LIs by default*/
#accordian ul ul {
    display: none;
}

#accordian li.active ul {
    display: block;
}

#accordian li.noactive ul {
    display: none;
}



/* ------------------------------------------------------------------------------acc2*/







#accordian2 {
 /*   background: linear-gradient(to right,#051420, #0f102f); */
    width: 210px;
    margin: 0px auto 0 auto;
    color: white;
    /*Some cool shadow and glow effect*/
    /*   box-shadow: 
        0 0 10px 1px rgba(0, 0, 0, .3)*/
}
/*heading styles*/
: root {
    --main-bg-color: coral;
}

#accordian2 h3, h2 {
    font-size: 16px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    /*   background: #191b30;   */
    /*  background: linear-gradient(#003040, #002535);  */
}
    /*heading hover effect*/
    #accordian2 h3 h2:hover {
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
    }



/*iconfont styles*/
#accordian2 h3 h2 span {
    font-size: 16px;
    margin-right: 10px;
}

#accordian2 h3 h2::before {
    content: "🔽";
    float: right;
    position: inherit;
    left: 190px;
    margin-right: 7px;
    font-size: 10px;
    /*         margin-top: 8px;*/
    color: #507799;
}



/*list items*/
#accordian2 li {
    list-style-type: none;
}

/*links*/
#accordian2 ul ul li a {
    /*  color: white; */
    text-decoration: none;
    font-size: 16px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    transition: all 0.15s;
}


    #accordian2 ul ul li a:hover {
        /* background: #003545;*/
        border-left: 10px solid lightgreen;
        border-right: 10px solid lightgreen;
        font-weight: bold;
    }

/*Lets hide the non active LIs by default*/
#accordian2 ul ul {
    display: none;
}

#accordian2 li.active ul {
    display: block;
}

#accordian2 li.noactive ul {
    display: none;
}


#accordian2 ul.active ul {
    display: block;
}

#accordian2 ul.noactive ul {
    display: none;
}









input[name=TxSearch] {
    width: 130px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-size: 12px;
    background-color: white;
    /* 2026-09-21 acarter: this pointed at a search-icon PNG under Common/images
       that has never existed in the repo, and 404s in prod (verified directly).
       Being a CSS background, it is NOT covered by the global img onerror
       fallback in WaffleNav.ascx -- so the magnifier simply never drew, and
       every page carrying a TxSearch box fired a 404 for it on load.
       Replaced with an inline SVG data URI: restores the icon, removes the
       request entirely, and ships no new asset that can go missing again.
       (Deliberately no literal path in this comment -- the first version of
       it quoted one and tripped check-unregistered-images.py on itself.) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 L21 21'/%3E%3C/svg%3E");
    background-position: 3px 3px;
    background-repeat: no-repeat;
    /*  padding: 6px 20px 10px 25px; */
    margin-left: 30px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[name=TxSearch]:focus {
  width: 150px;
}

 .mybtn
{

    border-style: none;
    border-color: inherit;
    border-width: medium;
    background-color: #2E7D32; /* Green */
    color: white;
    padding: 6px 14px;                 /* 2026-07-03: horizontal breathing room */
    white-space: nowrap;               /* 2026-07-03: never wrap/clip label ("Bac" -> "Back") */
    flex: 0 0 auto;                    /* 2026-07-03: don't shrink below content in flex cells (.Eksport) */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius:6px;
    line-height:normal;
    }
/* 2026-05-12 acarter: removed orphan declarations + stray closing brace
   that were corrupting CSS parsing for everything that followed.
   The orphan lines (`color: red; background-color: #003545; }`) had no
   parent selector. Removed them entirely. */

 .mytxt
 {
   
    background-color: #fff; /* Green */
  border: none;
  color: black;
  padding: 6px;
 
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
 border-radius:6px;
 border-width:1px;
 border-style:solid;
}
       .mytxt:hover  {
	color: midnightblue;
     background-color: #ffd800;
}

        /* Dropdown Button */

        /* Dropdown Button */
.dropbtn {
  background-color: #2E7D32;
  color: white;
  padding: 5px;
  font-size: 12px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin-right:36px;
  float:right;
  text-align: left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 0px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size:12px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}


 /* Dropdown Button Profile Top Right */
.dropbtn2 {
    background-color: rgba(76, 148, 174, 0.2);
    color: white;
    padding: 5px;
    font-size: 7px;
    border: none;
    /* margin-left: 140px; */
    padding: 11px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown2 {
  position: relative;
  display: inline-block;
  float:right;
  margin-right:25px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
  display: none;
  position: absolute;
   right:0;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
 
}

/* Links inside the dropdown */
.dropdown-content2 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size:12px;
}

/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown2:hover .dropdown-content2 {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown2:hover .dropbtn2 {background-color: #3e8e41;}

/* 3*/
.dropbtn3 {
  background-color: rgba(76, 148, 174, 1);
  color: white;
  padding: 5px;
  font-size: 12px;
  border: none;
  text-align: left;
      margin-left: 15px;
}


.dropdown3 {
  position: relative;
  display: inline-block;
  float:right;
    margin-right:36px;
  float:right;
    text-align: left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content3 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size:12px;
}

/* Change color of dropdown links on hover */
.dropdown-content3 a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown3:hover .dropdown-content3 {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown3:hover .dropbtn3 {background-color: #3e8e41;}

.headerstyle {
    color: #000000;
    text-transform: uppercase;
    height: 35px;
    background-color: #a6c1bf;
    font-weight: bold;
    
    border-style: solid;
    border-width: 1px;
    text-align: left;
    vertical-align: middle;
    font-size: 12px;
    
}

.rowstyle {




 border-color:Silver;
 border-style: solid;
 border-width: 1px;
 text-align:left;
 vertical-align:middle;
 padding:15px !important;


}

.columnstylecenter {


 text-align:center;
 vertical-align:middle;
 padding:15px !important;

}

.columnstyleleft {


 text-align:left;
 vertical-align:middle;
 padding:15px !important;

}

.styled-table tr th {
    padding-left: 25px;
    height: 40px;
    padding-right: 25px;
}

.styled-table tr td {
    padding-left: 25px;
    padding-right: 25px;
    height: 40px;
}




.button {
        background-color: #2c6b13 !important;
        -webkit-border-radius: 10px !important;
        border-radius: 10px !important;
        border: none !important;
        color: #eeeeee !important;
        cursor: pointer;
        display: inline-block;
        font-family: sans-serif;
        font-size: 13px !important;
       
        text-align: center;
        text-decoration: none;
      }
      @keyframes glowing {
        0% {
          background-color: #2ba805;
          box-shadow: 0 0 5px #2ba805;
        }
        50% {
          background-color: #49e819;
          box-shadow: 0 0 30px #49e819;
        }
        100% {
          background-color: #2ba805;
          box-shadow: 0 0 5px #2ba805;
        }
      }
      .button {
        animation: glowing 1300ms infinite;
      }




.glowRed {
    background-color: #ff0000 !important;
    -webkit-border-radius: 10px !important;
    border-radius: 10px !important;
    border: none !important;
    color: #eeeeee !important;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 13px !important;
    text-align: center;
    text-decoration: none;
}

@keyframes glowing2 {
    0% {
        background-color: #ff0000;
        box-shadow: 0 0 5px #ff0000;
    }

    50% {
        background-color: #ed4a16;
        box-shadow: 0 0 30px #ff0000;
    }

    100% {
        background-color: #ff0000;
        box-shadow: 0 0 5px #ff0000;
    }
}

.glowRed {
    animation: glowing2 1300ms infinite;
}




/* The Modal (background)  __?????????????????*/
.modal {
    display: none; /*  Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
 
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

.modal input {

    height:35px;
}


/* The Modal    SMALL*/
.modalSm {
    display: none; /*  Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-contentSm {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 600px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.modalSm input {
    height: 35px;
}




    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {
            top: -300px;
            opacity: 0
        }

        to {
            top: 0;
            opacity: 1
        }
    }

    @keyframes animatetop {
        from {
            top: -300px;
            opacity: 0
        }

        to {
            top: 0;
            opacity: 1
        }
    }
    /* The Close Button */
    .close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  visibility:hidden;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 15px 16px;
  background-color: #236526;
  color: white;
}

.modal-body {padding: 0px 0px;}

.modal-footer {
    padding: 2px 16px;
    /* 2026-07-02 acarter (Lane 2 contrast): white text on the old medium
       green #3D8B40 was 4.23:1 (below WCAG AA 4.5:1). Darkened to #2E7D32
       (5.13:1 with white) so the footer chrome passes AA. Same hue family,
       so the visual identity is preserved. */
    background-color: #2E7D32;
    color: white;
    height: 12px;
}

.tooltip {
  position: relative;
  display: inline-block;
 
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #051420;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -35px;
  left: -30px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.hiddencol
  {
    display: none;
  }

] {
    padding-left: 10px;
    padding-right: 10px;
}

.column2 {
    float: left;
    /* width: 40%; */
    padding: 20px;
    display: inline-block;
    width: calc(48% - 2px);
}

/* Clear floats after the columns */
.row2:after {
    content: "";
    display: table;
    clear: both;
}


@media screen and (max-width: 300px) {
    .column2 {
        width: 100%;
    }
}

input {
    padding-left: 8px;
    padding-right: 8px;
}

textarea:focus {
    background: pink;
    padding-left: 8px;
}

textarea {
    
    padding-left: 8px;
}


.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
  
}

    .styled-table thead tr {
        /* 2026-07-02 acarter (Lane 2 contrast): white text on #009879 was
           3.64:1 (below WCAG AA 4.5:1). Darkened to #00796B (5.32:1 with
           white); same teal-green hue family, header identity preserved. */
        background-color: #00796B;
        color: #ffffff;
        text-align: left;
    }

    .styled-table th,
    .styled-table td {
        padding: 12px 15px;
    }

    .styled-table tbody tr {
        border-bottom: 1px solid #dddddd;
      background-color: #f3f3f3; 
        border-width: 2px;
        color: black;
    }

        .styled-table tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #ccc;
             background-color: #cfcfcf;
           
        }



            

        .styled-table tbody tr.active-row {
            font-weight: bold;
            /* 2026-07-02 acarter (Lane 2 contrast): active-row link text
               #009879 on the light row bg was 3.64:1; darkened to #00796B
               (5.32:1 on white) so the highlighted label passes WCAG AA. */
            color: #00796B;
        }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    gap: 4px;
}

    .filter-group label {
        font-size: 13px;
        color: #555;
    }

    .filter-group input {
        font-size: 13px;
        color: #555;
        padding: 6px 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        padding: 6px 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 5px;
        min-width: 130px;
        background-color: #fff;
    }

.filter-control {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-width: 130px;
    background-color: #fff;
}

.price-range {
    min-width: 150px;
    flex: 1;
    max-width: 400px;
    margin-left: 14px;
    margin-right: 14px;
}

#priceSlider {
    margin-top: 5px;
    margin-bottom: 5px;
}

.price-labels {
    font-size: 9px;
    color: #d5d5d5;
    margin-left: 22px;
    margin-top: 52px;
    position: absolute;
}


.icon-button {
    padding: 6px 10px;
    font-size: 14px;
    background-color: #ffffff;
    color: #0c0c0c;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
    border-color: #bfbfbf;
    border-width: 1px;
    border-style: solid;
}

    .icon-button:hover {
        background-color: #3367d6;
    }

.reset-button {
    padding: 6px 12px;
    font-size: 14px;
    background-color: #e53935;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: flex-start;
}

.search-button {
    padding: 6px 12px;
    font-size: 14px;
    background-color: #504f79;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: flex-start;
}




.reset-button:hover {
    background-color: #c62828;
}


.export-button {
    padding: 6px 12px;
    font-size: 14px;
    background-color: #1B5E20;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: flex-start;
}

    .export-button:hover {
        background-color: #2c8c47;
    }

.total-label {
    margin-top: 15px;
    padding: 10px 15px;
    background-color: #f1f3f4;
    border-left: 4px solid #4285f4;
    border-radius: 6px;
    font-size: 15px;
    color: #202124;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: fit-content;
}


.noUi-horizontal .noUi-tooltip {
    font-size: 12px !important;
}

input[type="date"].filter-control {
    min-width: 125px;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
}



.topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 3rem;
    display: block;
    float: left;
}

    .topnav a.icon {
        display: block;
        margin-left: 23px;
    }

    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }
}


@media screen and (max-width: 600px) {
    #topnav2 {
        visibility: visible !important;
        position: absolute;
        top: -10px;
        right: 0px;
    }
}

@media screen and (max-width: 600px) {
    #profileR {
        margin-right: 70px;
    }
}


@media screen and (max-width: 600px) {
    #accordian2 {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    #leftID, #minidashID, #navigareID, #activityID, #minidashcontID, #activityID, #Eksport {
        visibility: hidden;
        clear: both;
        float: left;
        margin: 10px auto 5px 0px;
        width: 28%;
        display: none;
    }
}




@media screen and (max-width: 600px) {
    #buttonsID {
        margin-top: -50px;
        width: 100%;
    }
}



@media screen and (max-width: 600px) {
    #Top {
        margin-bottom: -112px;
    }
}



@media screen and (max-width: 600px) {
    #comm {
        visibility: visible !important;
    }
}


@media screen and (max-width: 600px) {
    #meteoid {
        height: 100px;
        visibility: hidden;
    }
}


@media screen and (max-width: 600px) {
    #filtersContID {
        height: auto !important;
    }
}

@media screen and (max-width: 600px) {
    #contContID {
        margin: 0px;
        margin-top: -30px;
    }
}

@media screen and (max-width: 600px) {
    #meteo, #hideB {
        visibility: hidden;
    }
}

@media screen and (max-width: 600px) {
    #profileID {
        margin-left: -31px;
        position: absolute;
        right: 0px;
        height: 60px;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    #contID, #dashID {
        margin-left: -230px;
        margin-top: -40px !important;
        margin-right: -20px;
    }
}

@media screen and (max-width: 600px) {
    #buttonsID {
        margin-top: -20px;
    }
}

@media screen and (max-width: 600px) {
    #logoSlika {
        height: 60px !important;
    }
}

@media screen and (max-width: 600px) {
    #pretraga {
        margin-top: 74px;
    }
}



@media screen and (max-width: 600px) {
    #dashID {
        height: 150px;
    }
}
/* === 2026-05-03 acarter: import Modern.css overlay (modern UI on top of legacy structure) === */
@import url('Modern.css');

/* ========================================================================
   2026-05-09 acarter: enterprise-class GridView pager styling.
   Added per Anthony's "the pagination looks horrible" directive.
   Apply by setting PagerStyle-CssClass="cf-pager" on the GridView
   (or use the Web.config <pages><controls> mapping for a global default).
   Pairs with PagerSettings-Mode="NumericFirstLast" + PageButtonCount="7".
   ======================================================================== */
.cf-pager {
    background: transparent !important;
    color: #1e293b !important;
    font-size: 13px;
    padding: 14px 0 6px !important;
    border-top: 1px solid #cbd5e1 !important;
}
.cf-pager td { padding: 0 !important; text-align: right; }
.cf-pager table { display: inline-block; }
.cf-pager a, .cf-pager span {
    display: inline-block;
    min-width: 34px;
    padding: 7px 12px;
    margin: 0 3px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    text-decoration: none !important;
    color: #1e293b;
    background: #ffffff;
    font-weight: 600;
    line-height: 1.2;
    transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
    box-shadow: 0 1px 1px rgba(15,23,42,0.04);
}
.cf-pager a:hover {
    background: #1d3a5f;
    border-color: #1d3a5f;
    color: #ffffff !important;
    text-decoration: none !important;
}
.cf-pager span {
    /* current page indicator */
    background: linear-gradient(135deg, #1d3a5f 0%, #635bff 100%);
    border-color: #635bff;
    color: #ffffff;
    cursor: default;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(99,91,255,0.28);
}
/* 2026-05-12 acarter: nav arrows -- make first/prev/next/last symbols
   readable + consistent. ASP.NET GridView renders these as "<", "<<",
   ">", ">>" or unicode chevrons depending on PagerSettings.Mode; we
   normalize their visual weight here so prev/next matches forward/back. */
.cf-pager a[title^="First"],
.cf-pager a[title^="Last"],
.cf-pager a[title*="page"] {
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    color: #1d3a5f !important;
    background: #f8fafc !important;
}
.cf-pager a[title^="First"]:hover,
.cf-pager a[title^="Last"]:hover,
.cf-pager a[title*="page"]:hover {
    color: #ffffff !important;
    background: #1d3a5f !important;
    border-color: #1d3a5f !important;
}
@media (max-width: 480px) {
    .cf-pager a, .cf-pager span {
        min-width: 30px;
        padding: 6px 9px;
        font-size: 12px;
    }
}

/* 2026-05-12 acarter: GLOBAL pager polish for older grids that haven't
   adopted .cf-pager yet. Same intent (clear contrast, consistent prev/
   next) applied via :last-child :not() selectors. */
table[id*="GridView"] tr td[colspan][align="right"] a,
table[id*="GridView"] tr td[colspan][align="right"] span {
    display: inline-block !important;
    min-width: 32px !important;
    padding: 6px 11px !important;
    margin: 0 3px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: #1e293b !important;
    background: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 1px rgba(15,23,42,0.04) !important;
    transition: background 120ms, color 120ms, border-color 120ms !important;
}
table[id*="GridView"] tr td[colspan][align="right"] a:hover {
    background: #1d3a5f !important;
    color: #ffffff !important;
    border-color: #1d3a5f !important;
}
table[id*="GridView"] tr td[colspan][align="right"] span {
    background: linear-gradient(135deg,#1d3a5f 0%,#635bff 100%) !important;
    border-color: #635bff !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(99,91,255,0.28) !important;
}

/* 2026-05-12 acarter: hide truly-empty data rows (all cells empty).
   Some data-bound grids leave placeholder padding rows that render as
   empty striped bands; this collapses them. Genuine "(no data)" lives
   in <EmptyDataTemplate> which is OUTSIDE the tbody. */
table[id*="GridView"] > tbody > tr.cf-empty-row,
table[id*="GridView"] > tbody > tr:has(> td:only-child:empty) {
    display: none !important;
}

/* ========================================================================
   2026-05-12 acarter: GLOBAL BREADCRUMBS (Common/Breadcrumbs.ascx)
   Drop-in via <cf:Breadcrumbs runat="server" />. Auto-derives the trail
   from URL via a catalog seeded from WaffleNav.MODULES. Tenant theme
   slot "B" drives the strip color via CSS custom properties.
   ======================================================================== */
.cf-crumbs {
    display: block;
    width: 100%;
    background: var(--cf-crumb-bg, rgba(20,31,45,0.04));
    border-bottom: 1px solid var(--cf-crumb-border, rgba(0,0,0,0.06));
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cf-crumb-fg, #4a5b6e);
}
.cf-crumbs ol {
    list-style: none; margin: 0; padding: 8px 18px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0;
}
.cf-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.cf-crumbs li + li::before {
    content: "\203A";
    color: var(--cf-crumb-sep, rgba(0,0,0,0.35));
    margin: 0 8px; font-weight: 400;
}
.cf-crumbs a {
    color: var(--cf-crumb-link, #1565c0);
    text-decoration: none;
    border-radius: 4px; padding: 2px 4px;
    transition: background 120ms, color 120ms;
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-crumbs a:hover { background: rgba(21,101,192,0.08); color: #0d4a92; text-decoration:none; }
.cf-crumbs a:focus-visible { outline: 2px solid #1565c0; outline-offset: 1px; }
.cf-crumbs li[aria-current="page"] > span {
    color: var(--cf-crumb-current, #0f172a);
    font-weight: 600; padding: 2px 4px;
    max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-crumb-back { display: inline-block; margin-right: 4px; color: inherit; opacity: 0.7; font-weight: 400; }

/* Mobile: collapse intermediates to ellipsis */
@media (max-width: 600px) {
    .cf-crumbs ol { padding: 8px 12px; }
    .cf-crumbs li:not(:first-child):not(:last-child) { display: none; }
    .cf-crumbs li:nth-child(2)::after {
        content: "\2026";
        display: inline-flex; align-items: center;
        color: var(--cf-crumb-sep, rgba(0,0,0,0.35));
        margin: 0 8px;
    }
    .cf-crumbs li:last-child::before { content: ""; margin: 0; }
}

/* Dark-mode admin pages (KeyActions/ApiDocumentation/etc all use
   body { background:#0f172a }) -- light text on dark crumb strip. */
body[data-cf-theme="dark-admin"] .cf-crumbs {
    background: rgba(255,255,255,0.04);
    border-bottom-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
}
body[data-cf-theme="dark-admin"] .cf-crumbs a { color: #93c5fd; }
body[data-cf-theme="dark-admin"] .cf-crumbs li[aria-current="page"] > span { color: #f1f5f9; }

/* ========================================================================
   2026-05-12 acarter: ENTERPRISE LANDING POLISH
   Per Anthony's "this is the one page every user sees, has to be perfect,
   exceptional, and the best UI within the entire system" directive.
   Replaces the broken raster-image icons in the top bar (calendar.png,
   tasks.png, app1.png, approve.png, hmarker.png, hclock.png, etc.) with
   inline-SVG-driven enterprise components, and rebuilds the 6 broken
   homepage column images with CSS-only enterprise hero cards.
   ======================================================================== */

/* ---- Top action bar (right side: calendar / tasks / notifications / approvals) ---- */
.cf-act-bar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; padding: 8px 18px 8px 8px;
    flex-wrap: wrap;
}
.cf-act-item {
    position: relative;
    display: flex; align-items: center; gap: 6px;
    padding: 7px 11px;
    border-radius: 8px;
    color: rgba(255,255,255,0.78);
    text-decoration: none !important;
    font-size: 12px; font-weight: 500;
    border: 1px solid transparent;
    transition: background 140ms, color 140ms, border-color 140ms, transform 140ms;
    background: rgba(255,255,255,0.03);
}
.cf-act-item:hover {
    background: rgba(99,91,255,0.18);
    color: #ffffff;
    border-color: rgba(99,91,255,0.4);
    transform: translateY(-1px);
}
.cf-act-item .cf-act-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: inherit;
}
.cf-act-item .cf-act-text {
    font-size: 12px; letter-spacing: 0.1px;
}
.cf-act-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    background: linear-gradient(135deg,#ef4444,#dc2626);
    color: #ffffff;
    border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(220,38,38,0.4);
    border: 1.5px solid var(--cf-act-bar-bg, #141f2d);
}
@media (max-width: 980px) {
    .cf-act-item .cf-act-text { display: none; }
    .cf-act-item { padding: 8px; }
}

/* ---- Meteo / status bar (left side of header: company / location / clock / event) ---- */
.cf-meteo-bar {
    display: flex; align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 18px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}
.cf-meteo-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
    transition: background 120ms, border-color 120ms;
}
.cf-meteo-chip:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
}
.cf-meteo-chip svg {
    flex: none;
    color: rgba(165, 243, 252, 0.85);
}
.cf-meteo-chip span#ct {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.4px;
}
.cf-meteo-sep {
    color: rgba(255,255,255,0.22);
    padding: 0 4px;
}
.cf-meteo-brand {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    letter-spacing: 0.2px;
}

/* =====================================================================
   ACCOUNT STRIP — one line + pulldown (round8g, 2026-06-27 acarter)
   Legacy chrome variant (pages that load Styles.css only, e.g.
   POS/Sale/Transactions_new.aspx). The strip sits in the DARK navy
   .Top header band here, so the summary/details use white-on-dark
   surfaces. Same markup as the parity-grid case (AddRecord.activityM):
   .cf-meteo > .cf-meteo-summary (one line) + .cf-meteo-details (panel).
   ===================================================================== */
.cf-meteo {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}
.cf-meteo.cf-meteo-bar { padding: 12px 18px; }
.cf-meteo-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.95);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    max-width: 340px;
    transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.cf-meteo-summary:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.26);
}
.cf-meteo[data-open] .cf-meteo-summary {
    background: rgba(255,255,255,0.14);
    border-color: rgba(165,243,252,0.55);
    box-shadow: 0 0 0 3px rgba(165,243,252,0.14);
}
.cf-meteo-summary .cf-meteo-co {
    background: transparent;
    border: 0;
    padding: 0;
    gap: 7px;
    max-width: 280px;
    overflow: hidden;
}
.cf-meteo-summary .cf-meteo-co-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cf-meteo-summary .cf-meteo-co svg { color: rgba(165,243,252,0.9); }
.cf-meteo-caret {
    color: rgba(255,255,255,0.7);
    flex: none;
    transition: transform .18s ease;
}
.cf-meteo[data-open] .cf-meteo-caret { transform: rotate(180deg); }
.cf-meteo-details {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 240px;
    max-width: 340px;
    padding: 12px;
    background: #1b1f3a;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.45);
    z-index: 1100;
}
.cf-meteo[data-open] .cf-meteo-details { display: flex; }
.cf-meteo-details .cf-meteo-chip { justify-content: flex-start; }
/* 2026-07-13 (Anthony): the Log out action inside the account pulldown reads as a
   real link (no underline, pointer) and warms to a warning tone on hover so it is
   clearly the sign-out control, not just another info chip. */
.cf-meteo-logout { text-decoration: none; cursor: pointer; }
.cf-meteo-logout:hover { color: #fca5a5; }
.cf-meteo-logout:hover svg { color: #fca5a5; }

/* ---- Profile bar (top-right: name / role / avatar / dropdown caret) ----
   2026-05-13 acarter: bumped right-padding from 22px -> 88px so the
   waffle launcher (fixed at right:18px, ~40px wide + 12px padding) gets
   clear breathing room. Was crowding the avatar; now there's a clean
   gap between the profile group and the waffle icon. */
.cf-profile-bar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 12px; padding: 10px 88px 10px 10px;
}
.cf-profile-meta {
    text-align: right; line-height: 1.2;
}
.cf-profile-name {
    color: #ffffff; font-size: 13px; font-weight: 600;
    letter-spacing: 0.1px;
}
.cf-profile-role {
    color: rgba(255,255,255,0.6);
    font-size: 11px; font-weight: 500;
    margin-top: 2px;
}
.cf-avatar, .cf-avatar-fallback {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 2px rgba(255,255,255,0.12);
    flex: none;
}
.cf-avatar-fallback {
    display: inline-flex; align-items: center; justify-content: center;
    color: #ffffff;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    user-select: none;
}
.cf-profile-menu { position: relative; }
.cf-profile-caret {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.cf-profile-caret:hover {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
}

/* ---- Total-stats banner (TOTAL CONTACTS / LEADS / TASKS / COMPANIES / DEALS VALUE) ---- */
/* The numbers sit under thin labels in a single row separated by hairline
   verticals. Anthony's screenshot showed the row with the right-side icons
   bleeding into the rightmost stat. Push them clear of the dashboard rail. */
.minidashCont .tooltip,
.minidashCont .cf-act-item,
.minidashCont .cf-act-bar { display: none !important; }
/* Make the numbers themselves crisp + larger weight */
.minidashCont p {
    color: rgba(255,255,255,0.95);
}
.minidashCont p:first-child {
    /* the small "TOTAL CONTACTS" label */
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.65) !important;
    font-weight: 600 !important;
    font-size: 10pt !important;
}

/* ---- Engage1 column hero cards: replace homepage-*.png images ---- */
/* Anthony's screenshot shows the old gradient banners with broken white
   placeholder boxes. These rules turn .column > div:has(img) into a
   self-rendered enterprise hero with a proper SVG-style icon. Each
   .column gets its hero color from a data-attr we add inline. */
/* ========================================================================
   2026-05-13 acarter: HUB-GRADE CARD POLISH
   Anthony's directive: HubSpot-quality icons + complete UI polish on top
   of polish. The previous "filled-gradient badge" look was an upgrade
   from line drawings but still felt generic. This pass:
     - Lighter card surface (white) with soft tinted accent border
     - Header section uses a soft pastel WASH (15-20% accent) so the
       3D-rich illustrated SVG can pop against a clean background
     - Icon SVGs are now multi-layer 3D illustrations: shadow plate,
       main shape with linear+radial gradients, top-edge highlight,
       floating accent details (sparkles, badges, tiny chart marks)
     - Button system becomes a horizontal pill row with hover-fill
     - Card hover: lift + colored glow shadow matching the accent
     - Title + one-line description added for context
   ======================================================================== */

/* Per-card accent vars (HubSpot-inspired palette) */
.column[data-cf-card="company"]    {
    --cf-accent: #1565c0; --cf-accent-2: #0c4a6e;
    --cf-wash: rgba(96, 165, 250, .14); --cf-wash-2: rgba(21, 101, 192, .08);
    --cf-glow: rgba(21, 101, 192, .22);
}
.column[data-cf-card="comm"]       {
    --cf-accent: #0d9488; --cf-accent-2: #115e59;
    --cf-wash: rgba(94, 234, 212, .18); --cf-wash-2: rgba(13, 148, 136, .08);
    --cf-glow: rgba(13, 148, 136, .22);
}
.column[data-cf-card="employees"]  {
    --cf-accent: #7e22ce; --cf-accent-2: #581c87;
    --cf-wash: rgba(216, 180, 254, .20); --cf-wash-2: rgba(126, 34, 206, .08);
    --cf-glow: rgba(126, 34, 206, .22);
}
.column[data-cf-card="marketing"]  {
    --cf-accent: #f97316; --cf-accent-2: #c2410c;
    --cf-wash: rgba(254, 215, 170, .26); --cf-wash-2: rgba(249, 115, 22, .08);
    --cf-glow: rgba(249, 115, 22, .22);
}
.column[data-cf-card="inventory"]  {
    --cf-accent: #d97706; --cf-accent-2: #92400e;
    --cf-wash: rgba(253, 230, 138, .26); --cf-wash-2: rgba(217, 119, 6, .08);
    --cf-glow: rgba(217, 119, 6, .22);
}
.column[data-cf-card="crm"]        {
    --cf-accent: #4f46e5; --cf-accent-2: #312e81;
    --cf-wash: rgba(165, 180, 252, .18); --cf-wash-2: rgba(79, 70, 229, .08);
    --cf-glow: rgba(79, 70, 229, .22);
}
/* 2026-06-25 (Bucket-6) Automotive Sales (dealerships) vertical hub cards.
   A red/auto accent family; each signature surface gets its own shade. */
.column[data-cf-card="autosales-pick"]      {
    --cf-accent: #dc2626; --cf-accent-2: #7f1d1d;
    --cf-wash: rgba(248,113,113,.18); --cf-wash-2: rgba(220,38,38,.08);
    --cf-glow: rgba(220,38,38,.22);
}
.column[data-cf-card="autosales-concierge"] {
    --cf-accent: #b91c1c; --cf-accent-2: #7f1d1d;
    --cf-wash: rgba(251,146,60,.18); --cf-wash-2: rgba(185,28,28,.08);
    --cf-glow: rgba(185,28,28,.22);
}
.column[data-cf-card="autosales-outreach"]  {
    --cf-accent: #ea580c; --cf-accent-2: #7c2d12;
    --cf-wash: rgba(253,186,116,.20); --cf-wash-2: rgba(234,88,12,.08);
    --cf-glow: rgba(234,88,12,.22);
}
.column[data-cf-card="autosales-fees"]       {
    --cf-accent: #b45309; --cf-accent-2: #7c2d12;
    --cf-wash: rgba(245,158,11,.18); --cf-wash-2: rgba(180,83,9,.08);
    --cf-glow: rgba(180,83,9,.22);
}
.column[data-cf-card="autosales-inv"]        {
    --cf-accent: #ef4444; --cf-accent-2: #991b1b;
    --cf-wash: rgba(252,165,165,.20); --cf-wash-2: rgba(239,68,68,.08);
    --cf-glow: rgba(239,68,68,.22);
}

/* Card surface override (was: white card + grayblue border) */
.column[data-cf-card] {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 0 !important;
    overflow: hidden;
    transition:
        transform 220ms cubic-bezier(.2,.7,.2,1),
        box-shadow 260ms cubic-bezier(.2,.7,.2,1),
        border-color 220ms;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04);
    min-height: 460px;
    display: flex; flex-direction: column;
}
.column[data-cf-card]:hover {
    transform: translateY(-6px);
    border-color: var(--cf-accent);
    box-shadow:
        0 10px 32px var(--cf-glow),
        0 4px 14px rgba(15,23,42,.10);
}

/* Hero / illustration area: soft pastel wash so the icon pops */
.column[data-cf-card] .cf-card-hero {
    width: 100%;
    height: 200px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0;
    margin: 0;
    background:
        radial-gradient(ellipse at 30% 20%, var(--cf-wash) 0%, transparent 65%),
        radial-gradient(ellipse at 70% 80%, var(--cf-wash-2) 0%, transparent 70%),
        #fafbfc;
    color: var(--cf-accent);
    position: relative; overflow: hidden;
    border-bottom: 1px solid rgba(229,231,235,.6);
}
/* Subtle dot-grid pattern for HubSpot-y texture */
.column[data-cf-card] .cf-card-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(circle, rgba(15,23,42,.05) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: 0 0;
    opacity: .55;
    pointer-events: none; z-index: 0;
}
/* Hero highlight orb (top-left) */
.column[data-cf-card] .cf-card-hero::after {
    content: ""; position: absolute;
    width: 200px; height: 200px;
    top: -80px; left: -60px;
    background: radial-gradient(circle, var(--cf-glow) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
    filter: blur(8px);
}
/* The 3D illustration sits centered, large (148px), with depth shadow */
.column[data-cf-card] .cf-card-hero svg {
    width: 148px; height: 148px;
    filter: drop-shadow(0 12px 22px rgba(15,23,42,.18))
            drop-shadow(0 4px 8px rgba(15,23,42,.10));
    position: relative; z-index: 1;
    transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
.column[data-cf-card]:hover .cf-card-hero svg {
    transform: translateY(-4px) scale(1.04);
}

/* Body section: title + description + primary button + secondaries.
   2026-05-13 acarter (per Anthony): the PRIMARY button on every card
   must be at the SAME Y position across the row regardless of how many
   secondary buttons follow. Fixed-height title+desc+spacer block above
   the primary; secondaries stack BELOW the primary and extend the card
   downward. CSS grid equalizes card heights, so the empty space below
   secondaries on shorter cards stays at the bottom -- not interleaved. */
.column[data-cf-card] .cf-card-body {
    padding: 22px 24px 24px;
    display: flex; flex-direction: column;
    flex: 1;
}
.column[data-cf-card] .cf-card-title {
    position: static;
    text-align: left;
    color: #0f172a;
    font-size: 19px; font-weight: 700;
    letter-spacing: -.2px;
    text-shadow: none;
    margin: 0 0 6px;
    line-height: 1.25;
    min-height: 24px;
}
.column[data-cf-card] .cf-card-desc {
    color: #475569;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0 0 24px;
    min-height: 40px;
}
/* Primary button slot: appears at the same Y across all cards because
   the title+desc+margins above are fixed-size. */
.column[data-cf-card] .cf-card-primary {
    margin: 0 0 8px;
}
/* Secondary buttons stack below primary; card grows to fit them. */
.column[data-cf-card] .cf-card-secondaries {
    display: flex; flex-direction: column; gap: 8px;
}
/* 2026-05-24 acarter: dedicated AI-Power row under the secondaries.
   Each hub card surfaces 1-3 most-on-topic AI features directly so
   operators don't need to open the waffle nav to find them. Uses
   plain <a class="mybtn"> anchors (no asp:Button) to avoid designer
   churn + compile risk. The "AI POWER" mini-label visually segments
   the row so the link list reads as "your tools" vs "your AI tools." */
.column[data-cf-card] .cf-card-ai-row {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.column[data-cf-card] .cf-card-ai-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cf-accent, #6366f1);
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.column[data-cf-card] .cf-card-ai-label::before {
    content: "✨";
    font-size: 12px;
}
.column[data-cf-card] .cf-card-ai-row a.mybtn {
    text-decoration: none !important;
    /* 2026-05-24 Anthony feedback: AI Power button text must be left-aligned
       and fit cleanly within the button outline. The base .column .mybtn rule
       already sets text-align:left + padding:11px 16px, but anchors needed
       explicit overrides because the legacy global `.mybtn` rule (with
       text-align:center) was winning specificity against unscoped <a>. */
    text-align: left !important;
    /* Keep the right-edge arrow (::after) from colliding with the label */
    padding-right: 36px !important;
    /* Let long labels wrap rather than overflow */
    white-space: normal !important;
    line-height: 1.35 !important;
    /* Ensure anchor takes the full pill width, matching the asp:Button siblings */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Legacy: keep .cf-card-actions as a no-op wrapper so existing pages
   that haven't been split into primary/secondaries still render. */
.column[data-cf-card] .cf-card-actions {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: auto;
}

/* Button system: pill cards with hover-fill in the card's accent color.
   Wins via specificity over the legacy .mybtn rules. */
.column[data-cf-card] .mybtn,
.column[data-cf-card] input[type="submit"].mybtn,
.column[data-cf-card] input.mybtn {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 11px 16px !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important;
    cursor: pointer !important;
    transition:
        background-color 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 140ms cubic-bezier(.2,.7,.2,1),
        box-shadow 200ms ease !important;
    text-align: left !important;
    letter-spacing: -.1px !important;
    position: relative !important;
}
.column[data-cf-card] .mybtn::after {
    /* arrow at the right edge, fades in on hover */
    content: "→";
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%) translateX(-4px);
    opacity: 0;
    color: #ffffff;
    font-size: 14px;
    transition: opacity 160ms, transform 200ms;
}
.column[data-cf-card] .mybtn:hover,
.column[data-cf-card] input[type="submit"].mybtn:hover {
    background: var(--cf-accent) !important;
    background-color: var(--cf-accent) !important;
    color: #ffffff !important;
    border-color: var(--cf-accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px var(--cf-glow) !important;
}
.column[data-cf-card] .mybtn:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* Primary button = subtly emphasized.
   Matches both .cf-card-primary .mybtn (new structure) and
   .cf-card-actions .mybtn:first-child (legacy fallback). */
.column[data-cf-card] .cf-card-primary .mybtn,
.column[data-cf-card] .cf-card-actions .mybtn:first-child {
    background:
        linear-gradient(180deg, var(--cf-wash) 0%, transparent 100%),
        #ffffff !important;
    border-color: var(--cf-accent) !important;
    color: var(--cf-accent-2) !important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.column[data-cf-card] .cf-card-primary .mybtn:hover,
.column[data-cf-card] .cf-card-actions .mybtn:first-child:hover {
    background: var(--cf-accent) !important;
    color: #ffffff !important;
}

/* When the legacy <img> is still in the DOM, hide it so the hero block
   above takes over. Pages that use the new markup won't render an <img>
   inside .column at all. */
.column .cf-card-hero ~ img { display: none !important; }

/* ---- Enterprise button system: replace the inline BackColor="Green"/Red/Orange ---- */
/* Anthony's screenshot shows hard "Green / Red / #FF3300" buttons. Override
   them globally on landing pages so they render as a clean enterprise stack
   without per-button edits. The original BackColor inline style still wins
   if a page MUST keep it; everything goes through CSS specificity. */
.column .mybtn,
.column input[type="submit"].mybtn {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    width: 200px !important;
    margin: 5px auto !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05) !important;
    cursor: pointer !important;
    transition: background 140ms, color 140ms, border-color 140ms, transform 140ms !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.column .mybtn:hover,
.column input[type="submit"].mybtn:hover {
    background: linear-gradient(135deg,#1d3a5f,#635bff) !important;
    color: #ffffff !important;
    border-color: #635bff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(99,91,255,0.18) !important;
}
/* Make the legacy "Add" buttons read as primary actions vs the read-only
   ones; achieved by tagging in markup with class="cf-action-add" / "cf-action-edit"
   if/when a page wants to differentiate. Default style above is neutral
   so nothing looks broken before that tagging happens. */

/* ========================================================================
   2026-05-09 acarter: enterprise-class filter bar + active-filter chips.
   Per Anthony's "filters need to look enterprise class" directive.
   Pair with parameterized SQL on the back end (no concat of filter
   values into SQL strings -- see HACCP/Leads/Royalty fixes in the
   same audit batch).
   ======================================================================== */
.cf-filter-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 14px; margin: 0 0 14px;
    background: #fff;
    border: 1px solid #e5e7eb; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cf-filter-bar .cf-filter-label { color: #475467; margin-right: 4px; }
.cf-filter-bar select,
.cf-filter-bar input[type="text"],
.cf-filter-bar input[type="search"],
.cf-filter-bar input[type="date"] {
    height: 32px; padding: 0 10px;
    border: 1px solid #d0d5dd; border-radius: 6px;
    background: #fff; color: #101828;
    font: inherit; min-width: 140px;
    transition: border-color .15s, box-shadow .15s;
}
.cf-filter-bar select:focus,
.cf-filter-bar input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.cf-filter-bar .cf-filter-divider { height: 24px; width: 1px; background: #e4e7ec; margin: 0 4px; }
.cf-filter-bar .cf-filter-spacer  { flex: 1; }

.cf-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cf-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 6px 0 10px;
    background: #eef2ff; color: #3730a3;
    border: 1px solid #c7d2fe; border-radius: 999px;
    font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cf-filter-chip .cf-chip-key { color: #6366f1; font-weight: 600; }
.cf-filter-chip .cf-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: transparent; color: #3730a3; cursor: pointer;
    border: none; font-size: 14px; line-height: 1;
}
.cf-filter-chip .cf-chip-x:hover { background: #c7d2fe; }

.cf-btn { height: 32px; padding: 0 12px; border-radius: 6px;
          border: 1px solid transparent; cursor: pointer;
          font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          display: inline-flex; align-items: center; gap: 6px; }
.cf-btn-primary       { background: #4f46e5; color: #fff; }
.cf-btn-primary:hover { background: #4338ca; }
.cf-btn-ghost         { background: #fff; color: #475467; border-color: #d0d5dd; }
.cf-btn-ghost:hover   { background: #f9fafb; color: #101828; }
.cf-btn-danger-ghost  { background: #fff; color: #b42318; border-color: #fda29b; }
.cf-btn-danger-ghost:hover { background: #fef3f2; }

/* ========================================================================
   2026-05-09 acarter: enterprise form-section card with affinity tints.
   Per Anthony's "I like the colored-section concept; expand it but keep
   enterprise quality" directive. The 5 affinity classes are semantic --
   pick the one that matches your section's content type.
   Pages that already do colored sections inline (Contact_New,
   employees_new, accounts_New, etc.) can migrate to these classes for
   consistency; new forms should use these from the start.
   ======================================================================== */
.cf-form-shell {
    max-width: 1400px; margin: 0 auto; padding: 24px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.cf-form-title    { font-size: 22px; font-weight: 700; color: #111827; letter-spacing: -.01em; margin: 0 0 6px; }
.cf-form-subtitle { font-size: 14px; color: #6b7280; margin: 0 0 24px; }

.cf-form-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.cf-form-section {
    background: #fff;
    border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.cf-form-section h2 {
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: #374151; margin: 0 0 16px;
    padding-bottom: 10px; border-bottom: 1px solid #f3f4f6;
}
/* Affinity tints -- WCAG-AA contrast against #111827 body text */
.cf-form-section.cf-affinity-identity  { background: #f5f8ff; border-color: #dce6fb; } /* indigo  - who/what */
.cf-form-section.cf-affinity-contact   { background: #f0faf4; border-color: #cce9d6; } /* mint    - contact/address */
.cf-form-section.cf-affinity-financial { background: #fff8ec; border-color: #f5e2b8; } /* amber   - money/billing */
.cf-form-section.cf-affinity-relations { background: #fbf1f4; border-color: #f3d7df; } /* rose    - tags/owners/relations */
.cf-form-section.cf-affinity-system    { background: #f4f6f8; border-color: #e0e6ee; } /* slate   - IDs/audit/system */

.cf-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cf-form-row label { font-size: 13px; font-weight: 600; color: #374151; }
.cf-form-row input[type=text],
.cf-form-row input[type=email],
.cf-form-row input[type=tel],
.cf-form-row input[type=date],
.cf-form-row input[type=number],
.cf-form-row input[type=password],
.cf-form-row textarea,
.cf-form-row select {
    width: 100%; padding: 9px 12px;
    font-size: 14px; box-sizing: border-box;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.cf-form-row input:focus, .cf-form-row textarea:focus, .cf-form-row select:focus {
    outline: none; border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.cf-form-row .cf-help { font-size: 12px; color: #6b7280; }

.cf-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cf-form-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 24px; padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 720px) {
    .cf-form-grid  { grid-template-columns: 1fr; gap: 12px; }
    .cf-form-section { padding: 16px 16px; }
    .cf-form-row-2 { grid-template-columns: 1fr; }
}

/* ========================================================================
 * 2026-05-10 acarter: filter-bar system-wide modernization (Phase 1+3).
 *
 * Filter-bar audit found 237 unique filter-bearing pages across two
 * structurally-distinct families. Rather than refactor 200+ .aspx
 * files to use `class="cf-filter-bar"`, override the existing wrapper
 * classes so EVERY filter row gets the modern look automatically.
 *
 * Family 1: Legacy Pretraga (186 pages)
 *   <div id="filtersContID" class="filtersCont">
 *     <asp:Button "All" /><asp:Button "My" />
 *     <asp:DropDownList ... />
 *     <div class="Pretraga"><asp:TextBox /></div>
 *   </div>
 *
 *   We override .filtersCont (was 50px white card with gray bottom
 *   border, dated) to look like the cf-filter-bar palette: flex row
 *   with auto-height, soft border, light shadow. Inputs get the same
 *   32px height + rounded corners + indigo focus ring as cf-filter-bar.
 *
 * Family 2: Scaffolded filter-bar / filter-group (46 pages)
 *   <div class="filter-bar">
 *     <div class="filter-group"><label>X</label><select|input/></div>
 *     ...
 *   </div>
 *
 *   We override .filter-bar to align with cf-filter-bar styling
 *   (smaller padding, less aggressive gap), and tighten .filter-group
 *   labels.
 *
 * Net effect: 232 of 237 filter-bearing pages get the modern look
 * with ZERO .aspx file edits. The remaining ~5 Tier-C pages have
 * custom filter UI that needs per-page work (deferred).
 *
 * Key design choice: !important on color + border + radius so the
 * existing inline styles on .filtersCont (background-color:white,
 * border-bottom:gray) get overridden. !important is normally a
 * smell, but here it's the right tool -- we WANT to win against
 * pre-existing rules without rewriting 232 pages.
 */
.filtersCont,
.filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin: 0 0 14px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
    font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    /* Override the legacy fixed 50px height and bottom-border */
    height: auto !important;
    border-bottom-style: none !important;
}

/* Style child controls in the filter row -- match cf-filter-bar look.
   Selectors are scoped to .filtersCont/.filter-bar so we don't
   accidentally restyle every <select>/<input> on the page. */
.filtersCont select,
.filtersCont input[type="text"],
.filtersCont input[type="search"],
.filtersCont input[type="date"],
.filter-bar select,
.filter-bar input[type="text"],
.filter-bar input[type="search"],
.filter-bar input[type="date"] {
    height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #101828 !important;
    font: inherit !important;
    min-width: 140px !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.filtersCont select:focus,
.filtersCont input:focus,
.filter-bar select:focus,
.filter-bar input:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18) !important;
}

/* Buttons inside the filter row should match -- compact, rounded,
   no oversize legacy padding. */
.filtersCont input[type="submit"],
.filtersCont .mybtn,
.filter-bar input[type="submit"],
.filter-bar .mybtn {
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Pretraga (Serbian "Search") -- the old float:right hack breaks
   the new flex layout. Replace with margin-left:auto so the search
   box sits flush right within the flex row. */
.Pretraga {
    float: none !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Eksport (Serbian "Export") -- same float fix */
.Eksport {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* .filter-group (used in 46 scaffolded pages) -- tighten the
   stacked label/input layout. */
.filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 120px !important;
}
.filter-group label {
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Mobile: filter rows should stack vertically with full-width
   inputs so they don't overflow on small screens. */
@media (max-width: 720px) {
    .filtersCont, .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px !important;
    }
    .filtersCont select,
    .filtersCont input[type="text"],
    .filtersCont input[type="search"],
    .filter-bar select,
    .filter-bar input[type="text"],
    .filter-bar input[type="search"] {
        width: 100% !important;
        min-width: 0 !important;
    }
    .Pretraga, .Eksport {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
 * 2026-05-10 acarter: Sweep 7 -- modernize 469 GridView styles app-wide.
 *
 * Background: 469 .aspx files have inline grid styles using the dated
 * VS WebForms scaffolding palette ("Material green" 2007-era):
 *   HeaderStyle BackColor="#236526"  (dark green)
 *   FooterStyle BackColor="#1C5E55"  (dark teal)
 *   EditRowStyle BackColor="#7C6F57" (tan / brown)
 *   PagerStyle  BackColor="#3D8B40"  (medium green)
 *
 * Touching 469 files individually is too risky for the value. Instead,
 * we let the inline ASP.NET-generated styles be overridden by these
 * CSS rules with !important. Inline style attributes from <HeaderStyle/>
 * etc. render as inline `style=""` attrs on the <th>/<tr>/<td> -- our
 * CSS rules below match the generated <table class="..."> children and
 * win via !important.
 *
 * Result: every standard GridView gets a clean neutral look with no
 * per-page edits. Pages with the cf-pager class on PagerStyle (the
 * newer pages) keep their existing custom pager styling.
 *
 * Targets the following deprecated palette:
 *   #236526 / #3D8B40 / #1C5E55 / #7C6F57
 */
.GridView,
form table.GridView,
table[id*="GridView"] {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    font-size: 13px !important;
}

/* Header row: dark teal/tan -> neutral light slate */
table[id*="GridView"] th,
table[id*="GridView"] tr.header,
table[id*="GridView"] tr:first-child td[align="center"][colspan],
form table[id*="GridView"] > tbody > tr:first-child > th,
form table[id*="GridView"] > thead > tr > th {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 10px 12px !important;
}

/* Footer row: dark teal -> very light slate */
table[id*="GridView"] tr.footer,
table[id*="GridView"] > tbody > tr:last-child:not(.cf-pager) {
    background-color: #f9fafb !important;
    color: #475569 !important;
    font-weight: 600 !important;
    border-top: 1px solid #e5e7eb !important;
}

/* Edit row: tan/brown -> soft amber-50 (still distinct enough to see edit mode) */
table[id*="GridView"] tr.edit,
table[id*="GridView"] tr[style*="#7C6F57"],
table[id*="GridView"] tr[style*="#7c6f57"] {
    background-color: #fffbeb !important;
    color: #422006 !important;
}

/* Pager row: medium green -> neutral. The newer .cf-pager class
   handles its own styling; this is for pages that haven't adopted it. */
table[id*="GridView"] tr[align="right"]:last-child:not(.cf-pager) td,
table[id*="GridView"] tr td[colspan][align="right"] {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-top: 1px solid #e5e7eb !important;
}

/* Selected row: light blue accent (replaces the dated #C5BBAF) */
table[id*="GridView"] tr.selected,
table[id*="GridView"] tr[style*="#C5BBAF"],
table[id*="GridView"] tr[style*="#c5bbaf"] {
    background-color: #dbeafe !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* Alternating row striping if the page didn't define one */
table[id*="GridView"] > tbody > tr:nth-child(even):not(.header):not(.footer):not(.edit):not(.selected) {
    background-color: #fafbfc;
}

/* Direct override of any inline style="background-color:#236526..." style="..." from the grid header generator */
table[id*="GridView"] [style*="background-color:#236526"],
table[id*="GridView"] [style*="background-color:#236526;"],
table[id*="GridView"] [style*="background-color: #236526"],
table[id*="GridView"] [style*="#236526"] {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}
table[id*="GridView"] [style*="background-color:#1C5E55"],
table[id*="GridView"] [style*="#1C5E55"],
table[id*="GridView"] [style*="#1c5e55"] {
    background: #f9fafb !important;
    background-color: #f9fafb !important;
    color: #475569 !important;
}
table[id*="GridView"] [style*="background-color:#3D8B40"],
table[id*="GridView"] [style*="#3D8B40"],
table[id*="GridView"] [style*="#3d8b40"] {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #475569 !important;
}

/* ========================================================================
 * 2026-05-25 acarter: form-control sizing NORMALIZE
 * --------------------------------------------------------------------
 * Anthony 2026-05-25 walk-through:
 *   "Many selection boxes across places are not proportional, aligned
 *    with the same size and type, and text placement so you can see
 *    it within the constraints of the button... I have seen this
 *    mostly in drop down selection menus but I would not assume that
 *    those are the only buttons that are impacted."
 *
 * AUDIT (Scripts/audit-control-sizing.py, 2026-05-25):
 *   .mytxt  -- defined in 4 CSS files (Styles, Modern, POSStyles,
 *              cf-ai-polish) with conflicting padding/height/font.
 *   .mybtn  -- defined in 6 CSS files; same problem at larger scale.
 *   1,004 of 1,297 dropdowns have inline Height/Width attributes
 *     that override CSS by specificity unless !important is used.
 *   100 dropdowns have NO class at all (browser-default sizing).
 *   13 raw <select> tags (mostly no class).
 *
 * THIS BLOCK does TWO things:
 *   (1) Normalize every <select> to a consistent geometry +
 *       cross-browser-identical arrow (custom inline SVG, eliminates
 *       Chrome/Firefox/Safari native arrow variance), regardless of
 *       which .mytxt / .filter-control / no-class variant won.
 *   (2) Force button text to render INSIDE the button geometry
 *       (line-height + white-space + overflow), without touching the
 *       background/color/border that lives per-CSS-file by design.
 *
 * SPECIFICITY: tag+class selectors (0,1,1) win over plain .mytxt
 *   (0,1,0) on tie-break-by-load-order. AI pages with #col1 .mytxt
 *   (1,0,1) still win locally -- those pages were already styled
 *   independently by intent.
 *
 * NOT TOUCHED:
 *   - Page-level inline Width="" attrs (preserve horizontal layout)
 *   - Button background/border/color (design intent per page family)
 *   - #col1 / #col2 AI page overrides (id-scoped, intentional)
 * ======================================================================== */

/* ── SELECT NORMALIZE ─────────────────────────────────────────────
   Matches every flavour: tagged <select>, .mytxt-classed, .filter-
   control, .cf-select, .cf-input, and the "no-class" 100. */
select,
select.mytxt,
select.filter-control,
select.cf-select,
select.cf-input,
select.textbox,
select.modern-dropdown,
select[class*="auto-style"] {
    /* Geometry: consistent floor; inline Height="" inline-style attrs
       are overridden because !important on a (0,1,1) selector beats
       a non-!important style="" (specificity 1000 but no !important). */
    min-height: 38px !important;
    box-sizing: border-box !important;
    padding: 6px 32px 6px 12px !important;   /* 32px right makes room for arrow */
    vertical-align: middle !important;

    /* Typography -- one canonical look across all browsers */
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: #1f2937 !important;

    /* Border + radius */
    border: 1px solid #d0d5dd !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;

    /* Custom arrow: inline SVG chevron in the reserved right padding.
       Removes browser-native arrow variance (Chrome/Firefox/Safari/Edge
       all render the default arrow differently and steal text padding). */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23475467' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
}
/* IE/legacy Edge native expand arrow */
select::-ms-expand { display: none !important; }

select:focus,
select.mytxt:focus,
select.filter-control:focus,
select.cf-select:focus,
select.cf-input:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
}

/* Disabled selects -- preserve dimming but keep geometry consistent */
select:disabled,
select[disabled],
select.aspNetDisabled {
    background-color: #f9fafb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
}

/* ── BUTTON TEXT-FIT NORMALIZE ────────────────────────────────────
   Three pages of complaints reduce to one rule: text MUST render
   inside the button's visible geometry. Wins by tag+class specificity
   over the 6 conflicting .mybtn definitions. We deliberately do NOT
   override background / border / color / padding / height -- those
   live per-CSS-file by design intent (POS vs AI vs storefront vs
   purchase). We ONLY enforce:
     - line-height 1.4 (no clipping on tall content)
     - white-space nowrap (no mid-word wrap that ate the button)
     - middle-vertical-align (icon + text co-baseline)
     - text-rendering geometry that fits the inline-flex container. */
.mybtn,
input.mybtn,
button.mybtn,
a.mybtn,
.cf-btn,
button.cf-btn,
a.cf-btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
button:not([class*="dropbtn"]):not(.ka-copy):not(.digit):not(.close) {
    line-height: 1.4 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* No text-overflow ellipsis intentionally: a clipped label is worse
       than a slightly oversized button. White-space:nowrap alone keeps
       the label readable; if a designer needs ellipsis they can opt in. */
}

/* End form-control sizing normalize ===================================== */

/* ========================================================================
 * 2026-07-03 buttons-global: ADAPTER-PROOF anti-clip for asp:Button labels
 * ------------------------------------------------------------------------
 * ROOT CAUSE: this app runs a CSS-friendly control adapter that STRIPS the
 * WebControl Width / Height / BackColor attributes at render time. Markup
 * like  <asp:Button Width="151px" Text="Add Log">  renders as a plain
 * <input type="submit"> with NO width attribute. With no width and the
 * default browser/theme padding, wide labels visually CLIP:
 *     'Add Log' -> cut off,  'Export' -> 'E',  'Apply' -> 'Ap',
 *     'Select export option..' dropdown -> truncated.
 * A prior fix only added width:auto for CssClass='mybtn'; most offending
 * buttons use auto-styleN or other classes and still clipped.
 *
 * The "BUTTON TEXT-FIT NORMALIZE" block above already forces
 * white-space:nowrap, but a nowrap label inside a control whose intrinsic
 * width was thrown away STILL clips because nothing tells the control to
 * grow to its content. THIS block adds ONLY the missing geometry so the
 * control sizes to its (nowrap) text:
 *     width:auto            - drop any stale fixed width; size to content
 *     min-width:max-content - never narrower than the label needs
 *     overflow:visible      - never hard-crop the glyphs
 *     box-sizing:border-box - padding counts inside the box, predictable
 *     min-padding L/R 14px  - a horizontal-padding FLOOR so 1-2 char
 *                             labels ('Export','Apply') aren't hugged.
 *       We set padding-left/right ONLY (never the padding shorthand) so
 *       we do NOT zero any page's vertical padding, and we scope the
 *       horizontal floor to controls that carry NO inline/page padding
 *       (:not([style*="padding"])) so a page that already pads more is
 *       left untouched. We never set height/line-height, so tall buttons
 *       keep their own geometry.
 *
 * DELIBERATELY NOT TOUCHED (so correct buttons are NOT restyled/shrunk):
 *   - background / background-color / color / border / border-radius
 *     (each per-page + per-CSS-file by design intent)
 *   - height / line-height / font-size / margin
 *   - display / float / text-align (layout position unchanged)
 *   - NO width:100% anywhere -> buttons are NEVER forced full-width.
 * max-content on width only GROWS a too-narrow control; a button already
 * wide enough for its label is unchanged (auto == its content box). The
 * padding floor is a min via box-sizing, not an override of larger per-
 * page padding (a later same-property !important on a more specific
 * selector still wins; here we target the same generic level as the
 * text-fit block so we only fill the gap, we don't fight page rules).
 *
 * NOTE: the SELECT NORMALIZE block above already floors <select> geometry
 * (min-height + padding + box-sizing), which fixes the truncated
 * 'Select export option..' dropdown; we do not re-touch <select> here.
 * ======================================================================== */
/* (A) GEOMETRY floor -- applies to every asp:Button-rendered control plus
   the common .mybtn / auto-styleN button classes. width:auto drops any
   stripped/stale fixed width; min-width:max-content guarantees the nowrap
   label always fits; overflow:visible + box-sizing make the fit reliable.
   These properties do NOT exist on the per-page design rules, so there is
   nothing to fight -- this is purely additive. */
input[type="submit"],
input[type="button"],
input[type="reset"],
button:not([class*="dropbtn"]):not(.ka-copy):not(.digit):not(.close),
.mybtn,
input.mybtn,
button.mybtn,
a.mybtn,
input[class*="auto-style"][type="submit"],
input[class*="auto-style"][type="button"],
input[class*="auto-style"][type="reset"],
button[class*="auto-style"] {
    width: auto !important;            /* size to content; drop stripped/stale fixed width */
    min-width: max-content;            /* never narrower than the (nowrap) label needs */
    overflow: visible !important;      /* never hard-crop the label glyphs */
    box-sizing: border-box !important; /* predictable: padding lives inside the box */
    text-overflow: clip;               /* explicitly no ellipsis: readable > pretty */
}

/* (B) HORIZONTAL-PADDING floor -- ONLY for button-shaped controls that
   carry NO inline/page horizontal padding of their own. Scoped to the
   generic tag level (low specificity) and left NON-!important, so ANY
   page/class rule that sets its own padding wins. This just stops a
   1-2 char label ('Export','Apply') from being hugged to the glyphs when
   the stripped Width left the control with only default padding. Never
   sets vertical padding, so button height is untouched. */
input[type="submit"]:not([style*="padding"]),
input[type="button"]:not([style*="padding"]),
input[type="reset"]:not([style*="padding"]),
button:not([class*="dropbtn"]):not(.ka-copy):not(.digit):not(.close):not([style*="padding"]) {
    padding-left: 14px;
    padding-right: 14px;
}

/* End buttons-global anti-clip ========================================== */

/* ===================================================================== */
/* CloudFran report frame (cf-report)                                    */
/* 2026-07-15: professional, responsive wrapper for embedded analytics   */
/* dashboards. Replaces bare full-bleed iframes with fixed height=3100px  */
/* (not responsive) and removes the reliance on the reportEmbed autoAuth  */
/* embed that required the viewer to be signed into the CloudFran Azure   */
/* AD tenant. The anonymous publish-to-web embed used here needs NO       */
/* viewer Power BI license: operators, managers and super-admins alike    */
/* view with zero per-seat cost. Native server-rendered reports (the      */
/* AgentsLiveReport path) take over automatically when the live feed is   */
/* enabled; this frame is the professional static fallback.               */
.cf-report{border:1px solid #e6e8ee;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  max-width:1400px;margin:18px auto;}
.cf-report__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid #eef0f4;background:linear-gradient(180deg,#fafbfc,#fff);}
.cf-report__ttl{display:flex;align-items:center;gap:12px;min-width:0;}
.cf-report__dot{width:9px;height:9px;border-radius:50%;background:#12b76a;
  box-shadow:0 0 0 4px rgba(18,183,106,.15);flex:none;}
.cf-report__h{font:600 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#101828;}
.cf-report__sub{font:400 12.5px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#667085;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cf-report__fs{display:inline-flex;align-items:center;gap:6px;border:1px solid #d0d5dd;background:#fff;
  color:#344054;font:500 13px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  padding:7px 12px;border-radius:8px;cursor:pointer;flex:none;}
.cf-report__fs:hover{background:#f9fafb;border-color:#b9c0cc;}
.cf-report__stage{position:relative;width:100%;height:clamp(560px,82vh,1500px);background:#f7f8fa;}
.cf-report__frame{width:100%;height:100%;border:0;display:block;}
.cf-report__skel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;color:#667085;
  font:500 14px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f7f8fa;}
.cf-report__spin{width:34px;height:34px;border:3px solid #e4e7ec;border-top-color:#7f56d9;
  border-radius:50%;animation:cfReportSpin .8s linear infinite;}
@keyframes cfReportSpin{to{transform:rotate(360deg);}}
@media (max-width:640px){.cf-report__stage{height:78vh;}.cf-report__sub{display:none;}.cf-report{margin:10px 6px;border-radius:12px;}}