@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
   font-size: 100%;
   vertical-align: baseline;
   box-sizing: border-box;
}

* {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

a,
img {
   -webkit-user-drag: none;
   -khtml-user-drag: none;
   -moz-user-drag: none;
   -o-user-drag: none;
   user-drag: none;
   pointer-events: auto;
   /* Behoud klikbaarheid */
}

input[type="file"] {
   -webkit-user-drag: auto;
   user-drag: auto;
}

ol,
ul {
   list-style: none;
}

blockquote,
q {
   quotes: none;
}

mark {
   background-color: #d6d9e1;
   color: #040a10;
}

table {
   border-spacing: 0;
   border-collapse: collapse;
}

::placeholder {
   color: #d6d9e1;
}

::-webkit-scrollbar {
   width: 5px;
   display: none;
}

::-webkit-scrollbar-thumb {
   background-color: var(--table-header-color);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

:root {
   --theme-font: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --body-color: #ffffff;
   --theme-color: #1b69d4;
   --topbar-color: #000000;
   --text-color: #040a10;
   --red-color: #de0952;
   --orange-color: #dead16;
   --green-color: #00da50;
   --badge-color: var(--red-color);
   --link-color: #74757b;
   --table-header-color: rgba(174, 176, 183, 0.7);
   --table-header-blur: blur(5px);
   --border-color: #d6d9e1;
   --label-color: #8a8c92;
   --row-color: #f5f5f5;
   --btn-default-color: #e7eaed;
   --nav-main-gap: 20px;
   --padding-main: 40px;
   --transaction-movement: 0.25s ease-in-out;
}

html {
   height: 100%;
   width: 100%;
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi) {
   html {
      -webkit-font-smoothing: subpixel-antialiased;
      -moz-osx-font-smoothing: auto;
   }
}

@media only screen and (max-width: 959px) {
   html {
      -webkit-text-size-adjust: none;
      -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
      text-size-adjust: none;
      -webkit-tap-highlight-color: transparent;
   }
}

body {
   font-family: var(--theme-font);
   font-size: 0.8em;
   font-weight: 400;
   line-height: 28px;
   letter-spacing: 0.03em;
   -webkit-font-feature-settings: 'ss01';
   font-feature-settings: 'ss01';
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
   background: var(--body-color);
   color: var(--text-color);
   cursor: default;
   -webkit-text-size-adjust: 100%;
}

h1 {
   display: block;
   font-size: 2em;
   font-weight: 700;
   color: var(--text-color);
   letter-spacing: 0;
}

h2 {
   display: block;
   font-size: 1.4em;
   font-weight: 700;
   color: var(--table-header-color);
}

h3 {
   display: block;
   font-size: 1.2em;
   font-weight: 700;
   color: var(--text-color);
}

a {
   text-decoration: none;
   color: var(--text-color);
   cursor: default !important;

   &.link {
      display: block;

      &:hover {
         color: var(--table-header-color);
      }
   }
   
   &.menu-link {
      color: var(--body-color);
   }
}

p.error {
   padding: 0 var(--padding-main);
}

fieldset {
   display: flex;
   margin-bottom: 25px;
   align-items: center;

   label {
      flex: 1;
      color: var(--label-color);
      min-width: 110px;
   }
   
   input,
   select,
   textarea {
      font-family: var(--theme-font);
      flex: 3;
      color: var(--text-color);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      padding: 15px;
      background-color: var(--body-color);
      box-sizing: border-box;
      -webkit-appearance: none;
      resize: none;

      &[type='checkbox'] {
         -webkit-appearance: checkbox;
      }
      
      &:disabled {
         color: var(--table-header-color);
      }
      
      &:focus {
         outline: 1px solid var(--theme-color);
      }
   }
   
   span {
      flex: 4;
      display: flex;
      flex-direction: column;
      position: relative;
   }
}

input[type='search'] {
   font-family: var(--theme-font);
   color: var(--text-color);
   border-radius: 12px;
   border: 1px solid var(--border-color);
   padding: 12px;
   background-color: var(--body-color);
   box-sizing: border-box;
   -webkit-appearance: none;
   min-width: 250px;

   &:focus {
      outline: 1px solid var(--theme-color);
   }
}

button {
   -webkit-appearance: none;
   border: none;
   background: transparent;
   font-family: var(--theme-font);

   &.back {
      &::before {
         content: "\2039";
         font-size: 1.25em;
         margin-right: 5px;
         transition: margin-right var(--transaction-movement);
      }
      
      &:hover::before {
         margin-right: 10px;
      }
   }
}

#language-picker {
   -webkit-appearance: none;
   height: 28px;
   border: none;
   font-size: 1em;
   font-weight: 700;
   color: var(--badge-color);
   outline: none;
   background: transparent;
}

#copyright {
   position: absolute;
   bottom: 10px;
   left: 20px;
   color: var(--table-header-color);
}

#container {
   width: 100%;
   height: 100%;
}

#login-wrapper {
   width: 100%;
   height: 100%;

   #login-holder {
      width: 100vw;
      min-width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      #logo-holder {
         margin-bottom: 25px;

         h2 {
            font-weight: 400;
         }
      }
      
      #form-holder {
         width: 300px;

         fieldset {
            flex-direction: column;
            align-items: flex-start;

            input {
               width: 100%;
            }
         }
      }
   }
}

#header {
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 99;

   #dragbar {
      position: absolute;
      z-index: 999;
      height: 40px;
      -webkit-app-region: drag;
      width: 100%;
      background-color: rgba(4, 10, 16, 0);
   }
   
   #menu {
      #topbar {
         height: 80px;
         background-color: rgba(4, 10, 16, 0.5);
         backdrop-filter: var(--table-header-blur);
         -webkit-backdrop-filter: var(--table-header-blur);
         padding: 0 var(--nav-main-gap) 10px;
         display: flex;
         gap: calc(var(--nav-main-gap) * 2);
         justify-content: flex-end;
         align-items: flex-end;
         z-index: 99;

         #logo {
            display: flex;
            align-items: center;
            height: 30px;

            img {
               height: 12px;
               margin-top: 2px;
            }
         }
         
         #main-topbar-menu {
            margin-right: auto;

            ul {
               display: flex;

               li {
                  position: relative;
                  padding: 0 calc(var(--nav-main-gap) * 2) 0 0;

                  a {
                     color: var(--body-color);
                     text-transform: uppercase;
                     font-weight: 700;
                     text-decoration: none;

                     &:hover,
                     &.active {
                        color: var(--link-color);
                     }
                  }
                  
                  .badge {
                     position: absolute;
                     background: var(--red-color);
                     padding: 2px 6px;
                     border-radius: 8px;
                     color: var(--body-color);
                     line-height: 1;
                     top: 0;
                     right: 15px;
                  }
               }
            }
         }
         
         #submenu-topbar-menu ul {
            display: flex;

            li {
               margin-left: var(--nav-main-gap);

               a {
                  color: var(--link-color);

                  &:hover,
                  &.active {
                     color: var(--body-color);
                  }
                  
                  &.admin {
                     color: var(--badge-color);
                  }
               }
            }
         }
         
         #profile-topbar-menu {
            display: flex;
            color: var(--body-color);

            > div {
               margin-left: var(--nav-main-gap);
            }
            
            #right-menubar-profile,
            #right-menubar-profile a {
               color: var(--body-color);
               display: flex;
               flex-direction: column;
               align-items: flex-end;
               line-height: 1.5em;

               span {
                  background: var(--body-color);
                  color: var(--theme-color);
                  line-height: 1;
                  padding: 3px 5px;
                  border-radius: 5px;
                  text-transform: uppercase;
                  font-size: 8px;
               }
            }
            
            #right-menubar-settings {
               position: relative;
               font-size: 1.4em;
               display: flex;
               align-items: center;

               .icon {
                  vertical-align: middle;
               }
            }
            
            #right-menubar-notifications {
               position: relative;
               font-size: 1.6em;
               display: flex;
               align-items: center;

               .icon {
                  vertical-align: middle;
               }
               
               span.badge {
                  position: absolute;
                  right: -7px;
                  top: 0;
                  background-color: var(--badge-color);
                  display: inline-block;
                  min-width: 5px;
                  padding: 3px 6px;
                  font-size: 9px;
                  font-weight: 700;
                  line-height: 1;
                  color: var(--body-color);
                  text-align: center;
                  white-space: nowrap;
                  border-radius: 8px;
               }
            }
            
            #right-menubar-logout {
               position: relative;
               font-size: 1.4em;
               display: flex;
               align-items: center;

               .icon {
                  margin-top: -5px;
                  vertical-align: middle;
               }
            }
         }
      }
   }
}

#track-header {
   width: 100%;
   height: 560px;
   display: flex;
   background-color: var(--text-color);
   justify-content: center;
   align-items: center;
   flex-direction: column;
   overflow: hidden;
   position: relative;

   h1 {
      color: var(--body-color);
      font-size: 3em;
      margin: 0 auto 3em auto;
      z-index: 2;
   }
   
   #carMapOverlay {
      background: radial-gradient(circle, rgba(4, 10, 16, 0) 0%, rgba(4, 10, 16, 1) 100%);
      width: 100%;
      height: 560px;
      position: absolute;
      top: 0;
      z-index: 1;
   }
   
   #carMap {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;

      > div {
         background-color: var(--text-color) !important;
      }
   }
}

#content-header {
   width: 100%;
   height: 230px;
   display: flex;
   background-color: var(--text-color);
}

#main-content {
   position: relative;
   width: 90vw;
   background: var(--body-color);
   margin: -110px auto 0 auto;
   height: calc(100% - 120px);
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   overflow: hidden;

   &::before {
      content: "";
      position: absolute;
      inset: 0;
      padding: 1px;
      /* border-dikte */
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      background: linear-gradient(var(--row-color), var(--body-color));
      -webkit-mask:
         linear-gradient(var(--body-color) 0 0) content-box,
         linear-gradient(var(--body-color) 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
   }
   
   #main-content-title {
      position: relative;
      height: 110px;
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--padding-main);
      z-index: 1;

      h2 {
         font-weight: 400;
         font-size: 1.0em;

         a {
            display: flex;
            align-items: center;
            color: var(--table-header-color);

            .md {
               margin-right: 5px;
            }
         }
      }
      
      #btn-group {
         display: flex;
         gap: calc(var(--padding-main) / 4);
      }
   }
   
   #main-content-empty {
      position: relative;
      width: 100%;
      height: calc(100% - 120px);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-size: 250px;
      background-position: 50% calc(50% - 60px);
      background-repeat: no-repeat;
      z-index: 1;

      &.track {
         background-image: url(../img/no_tracking.gif);
      }
      
      &.tags {
         background-image: url(../img/no_tags.gif);
      }
      
      &.readers {
         background-image: url(../img/no_readers.gif);
      }
      
      h1 {
         margin: 2em 0 0 0;
      }
      
      h2 {
         font-weight: 400;
         font-size: 1.2em;
      }
   }
   
   #track-table,
   #tags-table,
   #location-table,
   #users-table,
   #tasks-table {
      width: 100%;
      height: calc(100% - 110px);
      overflow-y: scroll;

      table {
         text-align: left;
         position: relative;
         border-collapse: collapse;
         width: 100%;
         margin-bottom: 52px;

         th,
         td {
            padding: 12px 0 12px 2vw;

            &.grey {
               color: var(--table-header-color);
            }
         }
         
         tr.head th {
            background: var(--table-header-color);
            backdrop-filter: var(--table-header-blur);
            -webkit-backdrop-filter: var(--table-header-blur);
            color: var(--body-color);
            text-transform: uppercase;
            font-size: 0.75em;
            z-index: 2;
         }
         
         th {
            background: var(--body-color);
            position: sticky;
            top: 0;
            /* Nodig voor sticky */
         }
         
         tr:nth-child(even) {
            background: var(--row-color);
         }
         
         tr:hover {
            background-color: #e5e5e5;
         }
      }
   }
   
   #settings-content {
      padding: 0 var(--padding-main) var(--padding-main);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      height: 80vh;
      overflow-y: scroll;

      > div {
         flex-basis: calc(50% - (var(--padding-main) / 2));
         background-color: var(--row-color);
         padding: var(--nav-main-gap) var(--nav-main-gap) 0;
         border-radius: 10px;

         h3 {
            margin-bottom: 25px;
         }
         
         fieldset {
            display: block;
            line-height: 20px;

            h4 {
               font-weight: 400;
               margin: 0;
            }
            
            label {
               display: block;
               margin-bottom: 12px;
            }
            
            input,
            select {
               width: 100%;
            }
         }
         
         .btn-group {
            text-align: right;
            margin-bottom: 25px;
         }
         
         &.wide {
            flex-basis: calc(66% - (var(--padding-main) / 2));
            display: flex;
            align-items: flex-start;
            justify-content: space-between;

            > div {
               flex-basis: 48%;
            }
         }
      }
   }
   
   input#brand {
      text-transform: uppercase;
   }
}

#track-header ol {
   position: relative;
   color: var(--body-color);

   li {
      list-style: none;
      float: left;
      width: 10vw;
      position: relative;
      text-align: center;

      > div {
         position: relative;
         top: -85px;

         .top {
            margin-bottom: 50px;
            line-height: 18px;

            span {
               display: block;

               &.point {
                  text-transform: uppercase;
                  color: var(--table-header-color);
                  font-size: 0.75em;
                  font-weight: 700;
               }
               
               &.location {
                  font-size: 1.25em;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
               }
            }
         }
         
         .bottom {
            .date {
               color: var(--table-header-color);
            }
         }
      }
      
      &::before {
         content: "";
         position: relative;
         width: 1px;
         height: 21px;
         line-height: 21px;
         border-radius: 50%;
         display: block;
         margin: -8px auto 10px auto;
         background: var(--table-header-color);
         transition: all ease-in-out .3s;
         z-index: 1;
      }
      
      &::after {
         content: "";
         position: absolute;
         width: 100%;
         height: 4px;
         background-color: var(--body-color);
         top: 0;
         left: -50%;
         transition: all ease-in-out .3s;
      }
      
      &:first-child::after {
         content: none;
      }
      
      &.done::before {
         content: "\2716";
         width: 21px;
         background: var(--green-color);
      }
      
      &.done + li::after {
         background: var(--green-color);
      }
      
      &.active::before {
         content: "\2609";
         background: var(--theme-color);
         width: 39px;
         height: 39px;
         font-size: 2em;
         line-height: 39px;
         margin: -17px auto 1px auto;
      }
      
      &.active + li::after {
         background: var(--theme-color);
      }
   }
}

#track-content {
   position: relative;
   display: flex;
   width: 90vw;
   margin: -110px auto 0 auto;
   height: calc(100% - 450px);
   z-index: 88;

   #car-info {
      display: flex;
      flex-direction: column;
      position: relative;
      background: var(--body-color);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      margin-left: 30px;
      padding: 2vh 30px;
      min-width: 235px;

      &::before {
         content: "";
         position: absolute;
         inset: 0;
         padding: 1px;
         /* border-dikte */
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
         background: linear-gradient(var(--row-color), var(--body-color));
         -webkit-mask:
            linear-gradient(var(--body-color) 0 0) content-box,
            linear-gradient(var(--body-color) 0 0);
         -webkit-mask-composite: xor;
         mask-composite: exclude;
      }
      
      ul {
         flex: 1;

         li {
            display: flex;
            flex-direction: column;
            margin-bottom: 1vh;

            .label {
               text-transform: uppercase;
               color: var(--table-header-color);
               font-size: 0.75em;
            }
            
            .desc {
               font-weight: 700;
            }
            
            &:last-child {
               border: none;
            }
         }
      }
      
      .btns-container {
         display: inline-grid;
         z-index: 1;

         .manual {
            border: 1px solid var(--body-color);
            background-color: var(--row-color);
            border-color: var(--row-color);
            color: var(--label-color);
            border-radius: 20px;
            min-height: 32px;
            padding: 0 9px;
            text-align: left;
            transition: var(--transaction-movement);

            .md {
               margin-right: 8px;
            }
            
            &:hover {
               background-color: var(--body-color);
               border-color: var(--label-color);
               color: var(--label-color);
            }
         }
         
         .delete {
            border: 1px solid var(--body-color);
            background-color: var(--theme-color);
            border-color: var(--theme-color);
            color: var(--body-color);
            border-radius: 20px;
            min-height: 32px;
            padding: 0 9px;
            margin: 1vh 0 0 0;
            text-align: left;
            transition: var(--transaction-movement);

            .md {
               margin-right: 8px;
            }
            
            &:hover {
               background-color: var(--body-color);
               color: var(--theme-color);
            }
         }
         
         .scheduler {
            border: 1px solid var(--body-color);
            background-color: var(--green-color);
            border-color: var(--green-color);
            color: var(--body-color);
            border-radius: 20px;
            min-height: 32px;
            padding: 0 9px;
            margin: 1vh 0 0 0;
            text-align: left;
            transition: var(--transaction-movement);

            .md {
               margin-right: 8px;
            }
            
            &:hover {
               background-color: var(--body-color);
               color: var(--green-color);
            }
         }
         
         .cancel {
            border: 1px solid var(--body-color);
            background-color: var(--badge-color);
            border-color: var(--badge-color);
            color: var(--body-color);
            border-radius: 20px;
            min-height: 32px;
            padding: 0 9px;
            margin: 1vh 0 0 0;
            text-align: left;
            transition: var(--transaction-movement);

            .md {
               margin-right: 8px;
            }
            
            &:hover {
               background-color: var(--body-color);
               color: var(--badge-color);
            }
         }
      }
   }
   
   #car-tasks {
      display: flex;
      flex-direction: column;
      position: relative;
      background: var(--body-color);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      margin-left: 30px;
      min-width: 235px;

      &::before {
         content: "";
         position: absolute;
         inset: 0;
         padding: 1px;
         /* border-dikte */
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
         background: linear-gradient(var(--row-color), var(--body-color));
         -webkit-mask:
            linear-gradient(var(--body-color) 0 0) content-box,
            linear-gradient(var(--body-color) 0 0);
         -webkit-mask-composite: xor;
         mask-composite: exclude;
      }
      
      #car-tasks-title {
         position: relative;
         height: 110px;
         min-height: 80px;
         flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 25px;
         z-index: 1;
      }
      
      .card-body {
         z-index: 2;
         overflow-y: scroll;
         flex: 1;

         .list-group {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            gap: 10px;

            .list-group-item {
               padding: 0 15px;

               label {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  cursor: pointer;
                  padding: 5px 10px;
                  background: var(--row-color);
                  border-radius: 6px;
               }
            }
            
            .is-completed span {
               text-decoration: line-through;
               opacity: .30;
            }
            
            input[type="checkbox"] {
               width: auto;
               margin: 0;
            }
         }
      }
   }
   
   #car-log {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--body-color);
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;

      &::before {
         content: "";
         position: absolute;
         inset: 0;
         padding: 1px;
         /* border-dikte */
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
         background: linear-gradient(var(--row-color), var(--body-color));
         -webkit-mask:
            linear-gradient(var(--body-color) 0 0) content-box,
            linear-gradient(var(--body-color) 0 0);
         -webkit-mask-composite: xor;
         mask-composite: exclude;
      }
      
      #car-log-title {
         position: relative;
         height: 110px;
         min-height: 80px;
         flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 var(--padding-main);
         z-index: 1;

         h2 {
            font-weight: 400;
            font-size: 1.0em;

            a {
               display: flex;
               align-items: center;
               color: var(--table-header-color);

               .md {
                  margin-right: 5px;
               }
               
               &:hover {
                  color: #a9abb2;
               }
            }
         }
         
         #btn-group {
            display: flex;
            gap: calc(var(--padding-main) / 4);
         }
      }
      
      #car-log-table {
         flex: 1;
         overflow-y: scroll;
         -ms-overflow-style: none;
         scrollbar-width: none;

         &::-webkit-scrollbar {
            display: none;
         }
      }
      
      table {
         text-align: left;
         position: relative;
         border-collapse: collapse;
         width: 100%;
         table-layout: fixed;
         margin-bottom: 52px;

         th,
         td {
            padding: 12px 0 12px 2vw;
         }
         
         tr.head th {
            background: var(--table-header-color);
            backdrop-filter: var(--table-header-blur);
            -webkit-backdrop-filter: var(--table-header-blur);
            color: var(--body-color);
            text-transform: uppercase;
            font-size: 0.75em;
         }
         
         th {
            background: var(--body-color);
            position: sticky;
            top: 0;
            /* Nodig voor sticky */
         }
         
         tr:nth-child(even) {
            background: var(--row-color);
         }
      }
   }
}

.alarm-dot {
   font-size: 1.4em;
   vertical-align: middle;
   margin: -3px 0 0 0;
   color: var(--table-header-color);

   &.orange {
      color: var(--orange-color);
   }
   
   &.red {
      color: var(--red-color);
   }
}

.tag-status {
   font-size: 1.2em;
   vertical-align: middle;
   margin: -3px 0 0 0;
   color: var(--body-color);
   border-radius: 10px;

   &.green {
      background-color: var(--green-color);
   }
   
   &.orange {
      color: var(--orange-color);
      font-size: 1.4em;
   }
   
   &.red {
      color: var(--red-color);
      font-size: 1.4em;
   }
}

#notifier {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
   width: 100%;
   transition: top .25s;
   text-align: center;

   span {
      display: inline-block;
      padding: 8px var(--padding-main) 10px;
      color: var(--body-color);
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
   }
   
   &.success span {
      background-color: var(--green-color);
   }
   
   &.warning span,
   &.recycle span {
      background-color: var(--orange-color);
   }
   
   &.error span {
      background-color: var(--red-color);
   }
}

/* modals */
.fade {
   opacity: 0;
   -webkit-transition: opacity 0.15s linear;
   -o-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;

   &.in {
      opacity: 1;
   }
}

.close {
   float: right;
   font-size: 21px;
   line-height: 1;
   color: var(--text-color);

   &:hover,
   &:focus {
      text-decoration: none;
   }
}

button.close {
   padding: 0 5px;
   border-radius: 3px;
   background-color: var(--row-color);

   &:hover {
      background-color: #e5e5e5;
   }
}

.modal-open {
   overflow: hidden;

   .modal {
      overflow-x: hidden;
      overflow-y: auto;
   }
}

.modal {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1050;
   display: none;
   overflow: hidden;
   -webkit-overflow-scrolling: touch;
   outline: 0;
   text-align: center;

   &.fade .modal-dialog {
      -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
      -o-transform: translate(0, -25%);
      transform: translate(0, -25%);
      -webkit-transition: -webkit-transform 0.3s ease-out;
      -moz-transition: -moz-transform 0.3s ease-out;
      -o-transition: -o-transform 0.3s ease-out;
      transition: transform 0.3s ease-out;
   }
   
   &.in .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0);
   }
}

.modal-dialog {
   position: relative;
   width: auto;
   margin: 10px;
   display: inline-block;
   text-align: left;
   vertical-align: middle;
}

.modal-content {
   position: relative;
   background-color: var(--body-color);
   background-clip: padding-box;
   border-radius: 15px;
   -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
   box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
   outline: 0;
   overflow: hidden;
}

.modal-backdrop {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1040;
   background-color: #000;
}

.modal-backdrop.fade {
   filter: alpha(opacity=0);
   opacity: 0;
}

.modal-backdrop.in {
   filter: alpha(opacity=45);
   opacity: 0.45;
}

.modal-header {
   padding: 30px 20px 25px 20px;

   .close {
      margin-top: -2px;
   }
}

.modal-title {
   margin: 0;
   line-height: 1;
   color: var(--text-color);
}

.modal-body {
   position: relative;
   padding: 20px;
   width: 100%;

   #addLocation-autocomplete-list {
      position: absolute;
      background: #ffffff33;
      width: 100%;
      top: 55px;
      max-height: 185px;
      padding: 5px 15px;
      border-radius: 12px;
      overflow: scroll;
      backdrop-filter: blur(3px);
      border: 1px solid var(--row-color);
   }
}

.modal-footer {
   padding: 20px;
   text-align: right;
   background-color: var(--row-color);
}

.modal-footer .btn + .btn {
   margin-bottom: 0;
   margin-left: 10px;
}

.modal-footer .btn-group .btn + .btn {
   margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
   margin-left: 0;
}

.modal-scrollbar-measure {
   position: absolute;
   top: -9999px;
   width: 50px;
   height: 50px;
   overflow-y: scroll;
}

@media (min-width: 768px) {
   .modal-dialog {
      width: 600px;
      margin: 30px auto;
   }
}

#labelModal .modal-dialog {
   width: 820px;
}

.modal-header:before,
.modal-header:after,
.modal-footer:before,
.modal-footer:after {
   display: table;
   content: " ";
}

.modal-header:after,
.modal-footer:after {
   clear: both;
}

@media screen and (min-width: 768px) {
   .modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
   }
}

.modal.fade:not(.in).right .modal-dialog {
   -webkit-transform: translate3d(25%, 0, 0);
   transform: translate3d(25%, 0, 0);
}

#settings-menu.modal,
#notification-center.modal {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: auto;
   width: 25%;
   max-width: 400px;

   &:before {
      content: none;
   }
   
   .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0;

      .modal-content {
         height: 100%;
         background-color: var(--body-color);
         border-radius: 0;
         -webkit-box-shadow: none;
         box-shadow: none;
         overflow-y: scroll;
         -ms-overflow-style: none;
         scrollbar-width: none;

         &::-webkit-scrollbar {
            display: none;
         }
         
         li {
            display: flex;
            line-height: 1.5;
            border-bottom: 1px solid var(--border-color);
            padding: calc(var(--padding-main) / 2) 0;

            a {
               display: flex;
            }
            
            .notification-icon {
               display: flex;
               justify-content: center;

               i {
                  font-size: 2em;
                  width: 50px;
                  height: 50px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 25px;
                  margin-right: 25px;

                  &.orange {
                     color: var(--orange-color);
                     background-color: #dead161c;
                  }
                  
                  &.red {
                     color: var(--red-color);
                     background-color: #de09521c;
                  }
               }
            }
            
            &:last-child {
               border-bottom: none;
            }
         }
         
         fieldset {
            display: block;
            line-height: 20px;

            h4 {
               font-weight: 400;
               margin: 0;
            }
            
            label {
               display: block;
               margin-bottom: 12px;
            }
            
            input,
            select {
               width: 100%;
            }
         }
      }
   }
}

#notification-center.modal .modal-body {
   padding: 20px 0;

   .no-notify {
      padding: calc(var(--padding-main) / 2) 20px !important;
   }
   
   li {
      padding: calc(var(--padding-main) / 2) 20px !important;

      &:hover {
         background-color: var(--row-color);
      }
   }
}

.btn {
   display: inline-block;
   margin-bottom: 0;
   font-weight: 400;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   background-image: none;
   padding: 15px 20px;
   line-height: 1;
   border-radius: 12px;
   outline: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;

   .md {
      vertical-align: middle;
      margin: -3px 5px 0 0;
   }
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
   cursor: not-allowed;
   filter: alpha(opacity=50);
   opacity: 0.5;
   -webkit-box-shadow: none;
   box-shadow: none;
}

.btn-default {
   color: var(--label-color);

   &:hover {
      color: #76787e;
   }
}

.btn-primary {
   color: var(--body-color);
   background-color: var(--theme-color);

   &:hover {
      background-color: #105bc3;
   }
}

.btn-status-group {
   display: inline;
}

.btn-add {
   float: left;
   color: var(--label-color);
   background-color: #e7eaed;

   &:hover {
      background-color: #d8dcdf;
   }
}

.btn-remove {
   float: left;
   color: var(--body-color);
   background-color: var(--red-color);

   &:hover {
      background-color: #c80749;
   }
}

.btn-enable {
   float: left;
   color: var(--body-color);
   background-color: var(--green-color);

   &:hover {
      background-color: #00ca4a;
   }
}

i.schedule-status {
   display: block;
   width: 10px;
   height: 10px;
   border-radius: 5px;
   background-color: var(--border-color);

   &.green {
      background-color: var(--green-color);
   }
   
   &.orange {
      color: var(--orange-color);
   }
   
   &.red {
      background-color: var(--red-color);
   }
}

code.debug {
   z-index: 9999;
   padding: 10px;
   position: fixed;
   bottom: 0;
   width: 100%;
   background-color: #77ffdd;
}

.cacheElementFiltre {
   display: none;
}

/* ==========================================================================
   Windows Window Controls (Custom Titlebar)
   Voeg deze CSS toe aan het EINDE van app.css
   ========================================================================== */
/* Windows controls container */
.windows-controls {
   display: none;
   /* Standaard verborgen, wordt getoond via JS op Windows */
   position: fixed;
   top: 0;
   right: 0;
   height: 40px;
   z-index: 9999;
   -webkit-app-region: no-drag;
}

/* Toon alleen op Windows (class wordt toegevoegd via JS) */
body.platform-windows .windows-controls {
   display: flex;
}

/* Op Windows: extra padding rechts in dragbar voor window controls */
body.platform-windows #dragbar {
   padding-right: 140px;
}

/* Window control buttons */
.windows-controls button {
   width: 46px;
   height: 40px;
   border: none;
   background: transparent;
   color: #ffffff;
   font-family: "Segoe MDL2 Assets", "Segoe Fluent Icons", sans-serif;
   font-size: 10px;
   cursor: pointer;
   transition: background-color 0.1s ease;
   -webkit-app-region: no-drag;
   display: flex;
   align-items: center;
   justify-content: center;
}

.windows-controls button:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

.windows-controls button:active {
   background-color: rgba(255, 255, 255, 0.05);
}

/* Minimize button */
.windows-controls .win-minimize:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

/* Maximize button */
.windows-controls .win-maximize:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

/* Close button - rode achtergrond bij hover */
.windows-controls .win-close:hover {
   background-color: #e81123;
}

.windows-controls .win-close:active {
   background-color: #bf0f1d;
}

/* SVG icons in de buttons */
.windows-controls button svg {
   width: 10px;
   height: 10px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1;
   display: block;
}

/* Fallback voor als Segoe fonts niet beschikbaar zijn */
.windows-controls .win-icon {
   display: inline-block;
   width: 10px;
   height: 10px;
}

/* Label Print Modal */
.label-modal-body {
   display: flex;
   gap: 30px;
   padding: 0 25px 25px 25px;
}

.label-settings {
   flex: 1;
   min-width: 250px;
}

.label-settings h3 {
   margin: 20px 0 10px 0;
   font-size: 1em;
}

.label-settings h3:first-child {
   margin-top: 0;
}

.label-settings fieldset {
   margin-bottom: 10px;
}

.label-settings fieldset label {
   min-width: 88px;
}

.label-settings fieldset input[type="number"] {
   width: 92px;
   padding: 8px 10px;
}

.margin-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.margin-grid fieldset {
   margin-bottom: 5px;
}

.checkbox-group {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;

   label {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      padding: 5px 10px;
      background: var(--row-color);
      border-radius: 6px;
      flex-basis: 115px;
   }
   
   input[type="checkbox"] {
      width: auto;
      margin: 0;
   }
}

.label-preview-container {
   flex: 1;
   display: flex;
   flex-direction: column;
}

.label-preview-container h3 {
   margin: 0 0 15px 0;
}

.label-preview-wrapper {
   background: #f0f0f0;
   padding: 20px;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 200px;
}

.label-preview {
   background: white;
   border: 1px solid #ccc;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
   font-family: 'Arial',
      sans-serif;
}

.label-preview .label-line {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.4;
}

.label-preview .label-line.brand-model {
   font-weight: 700;
}

.label-preview .label-line.tag {
   font-family: 'Courier New', monospace;
   letter-spacing: 1px;
}

.preview-note {
   margin-top: 10px;
   font-size: 0.9em;
   color: var(--label-color);
}

.task-checkbox-group {
   display: flex;
   flex-direction: column;
   gap: 10px;
   height: 160px;
   overflow-y: scroll;

   label {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 5px 10px;
      background: var(--row-color);
      border-radius: 6px;
   }
   
   input[type="checkbox"] {
      width: auto;
      margin: 0;
   }
}

/* Print-specifieke styles */
@media print {
   body * {
      visibility: hidden;
   }
   
   #labelPrintContent,
   #labelPrintContent * {
      visibility: visible;
   }
   
   #labelPrintContent {
      position: absolute;
      left: 0;
      top: 0;
   }
}

/* ==========================================================================
   FleetTag Mobile Responsive CSS
   Add this AFTER app.css or append to the end of app.css
   ========================================================================== */
/* ==========================================================================
   CSS Variables - Mobile Overrides
   ========================================================================== */
:root {
   --padding-main-mobile: 15px;
   --nav-main-gap-mobile: 10px;
   --touch-target-min: 44px;
   /* Apple HIG minimum touch target */
}

/* ==========================================================================
   Base Mobile Styles
   ========================================================================== */
@media only screen and (max-width: 1024px) {
   body {
      font-size: 14px;
      line-height: 1.5;
   }
   
   /* Allow text selection on mobile for copy/paste */
   * {
      -webkit-user-select: auto;
      -moz-user-select: auto;
      -ms-user-select: auto;
      user-select: auto;
   }
}

/* ==========================================================================
   Header & Navigation - Tablet
   ========================================================================== */
@media only screen and (max-width: 1024px) {
   #header #dragbar {
      display: none;
      /* No dragbar on web/mobile */
   }
   
   #header #menu #topbar {
      height: auto;
      min-height: 50px;
      padding: 8px var(--padding-main-mobile);
      flex-wrap: wrap;
      gap: var(--nav-main-gap-mobile);
   }
   
   #header #menu #topbar #logo-topbar-menu {
      order: 1;
   }
   
   #header #menu #topbar #main-topbar-menu {
      order: 3;
      width: 100%;
      margin-right: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }
   
   #header #menu #topbar #main-topbar-menu ul {
      gap: 5px;
   }
   
   #header #menu #topbar #main-topbar-menu ul li {
      padding: 0 15px 0 0;
   }
   
   #header #menu #topbar #main-topbar-menu ul li a {
      font-size: 0.85em;
      white-space: nowrap;
   }
   
   #header #menu #topbar #submenu-topbar-menu {
      order: 4;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 5px;
   }
   
   #header #menu #topbar #submenu-topbar-menu ul {
      justify-content: flex-start;
   }
   
   #header #menu #topbar #submenu-topbar-menu ul li {
      margin-left: 0;
      margin-right: 15px;
   }
   
   #header #menu #topbar #submenu-topbar-menu ul li a {
      font-size: 0.85em;
      white-space: nowrap;
   }
   
   #header #menu #topbar #profile-topbar-menu {
      order: 2;
      margin-left: auto;
   }
   
   #header #menu #topbar #profile-topbar-menu > div {
      margin-left: 12px;
   }
   
   #header #menu #topbar #profile-topbar-menu #right-menubar-profile {
      display: none;
      /* Hide profile name on tablet, show on wider screens */
   }
}

/* ==========================================================================
   Header & Navigation - Mobile
   ========================================================================== */
@media only screen and (max-width: 768px) {
   #header #menu #topbar {
      padding: 10px var(--padding-main-mobile);
      position: relative;
   }
   
   #header #menu #topbar #logo-topbar-menu #logo img {
      height: 12px;
   }
   
   /* Hide main menu items, show hamburger instead */
   #header #menu #topbar #main-topbar-menu,
   #header #menu #topbar #submenu-topbar-menu {
      display: none;
   }
   
   /* Mobile menu toggle button */
   #header #menu #topbar #profile-topbar-menu {
      gap: 8px;
   }
   
   #header #menu #topbar #profile-topbar-menu > div {
      margin-left: 8px;
   }
   
   #header #menu #topbar #profile-topbar-menu #right-menubar-settings .icon,
   #header #menu #topbar #profile-topbar-menu #right-menubar-notifications .icon,
   #header #menu #topbar #profile-topbar-menu #right-menubar-logout .icon {
      font-size: 1.3em;
   }
   
   /* Show mobile menu when active */
   body.mobile-menu-open #header #menu #topbar #main-topbar-menu,
   body.mobile-menu-open #header #menu #topbar #submenu-topbar-menu {
      display: block;
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      background: rgba(4, 10, 16, 0.98);
      padding: 15px;
      z-index: 100;
      animation: slideDown 0.2s ease-out;
   }
   
   body.mobile-menu-open #header #menu #topbar #main-topbar-menu {
      top: 50px;
   }
   
   body.mobile-menu-open #header #menu #topbar #submenu-topbar-menu {
      top: auto;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
   }
   
   body.mobile-menu-open #header #menu #topbar #main-topbar-menu ul,
   body.mobile-menu-open #header #menu #topbar #submenu-topbar-menu ul {
      flex-direction: column;
      gap: 0;
   }
   
   body.mobile-menu-open #header #menu #topbar #main-topbar-menu ul li,
   body.mobile-menu-open #header #menu #topbar #submenu-topbar-menu ul li {
      padding: 0;
      margin: 0;
   }
   
   body.mobile-menu-open #header #menu #topbar #main-topbar-menu ul li a,
   body.mobile-menu-open #header #menu #topbar #submenu-topbar-menu ul li a {
      display: block;
      padding: 12px 0;
      font-size: 1em;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   }
   
   @keyframes slideDown {
      from {
         opacity: 0;
         transform: translateY(-10px);
      }
      
      to {
         opacity: 1;
         transform: translateY(0);
      }
   }
}

/* ==========================================================================
   Mobile Menu Toggle Button
   ========================================================================== */
#mobile-menu-toggle {
   display: none;
   background: none;
   border: none;
   color: var(--body-color);
   font-size: 1.5em;
   padding: 5px;
   cursor: pointer;
   min-width: var(--touch-target-min);
   min-height: var(--touch-target-min);
   align-items: center;
   justify-content: center;
}

@media only screen and (max-width: 768px) {
   #mobile-menu-toggle {
      display: flex;
      order: 5;
   }
}

/* ==========================================================================
   Content Header
   ========================================================================== */
@media only screen and (max-width: 1024px) {
   #content-header {
      height: 180px;
   }
   
   #track-header {
      height: 400px;
   }
   
   #track-header #carMapOverlay {
      height: 400px;
   }
}

@media only screen and (max-width: 768px) {
   #content-header {
      height: 140px;
   }
   
   #track-header {
      height: 300px;
   }
   
   #track-header #carMapOverlay {
      height: 300px;
   }
   
   #track-header h1 {
      font-size: 2em;
   }
}

/* ==========================================================================
   Main Content Container
   ========================================================================== */
@media only screen and (max-width: 1024px) {
   #main-content {
      width: 95vw;
      margin-top: -80px;
   }
   
   #main-content #main-content-title {
      height: auto;
      min-height: 70px;
      padding: 15px var(--padding-main-mobile);
      flex-wrap: wrap;
      gap: 10px;
   }
   
   #main-content #main-content-title #title-bar {
      flex: 1 1 100%;
   }
   
   #main-content #main-content-title #title-bar h1 {
      font-size: 1.5em;
   }
   
   #main-content #main-content-title #title-bar h2 {
      font-size: 0.9em;
   }
   
   #main-content #main-content-title #btn-group {
      flex: 1 1 100%;
      flex-wrap: wrap;
   }
}

@media only screen and (max-width: 768px) {
   #main-content {
      width: 100vw;
      margin-top: -60px;
      border-radius: 15px 15px 0 0;
   }
   
   #main-content::before {
      border-radius: 15px 15px 0 0;
   }
   
   #main-content #main-content-title {
      padding: 15px var(--padding-main-mobile);
   }
   
   #main-content #main-content-title #title-bar h1 {
      font-size: 1.3em;
   }
   
   #main-content #main-content-title #btn-group {
      width: 100%;
   }
   
   #main-content #main-content-title #btn-group input[type='search'] {
      min-width: 100%;
      width: 100%;
   }
   
   #main-content #main-content-title #btn-group .btn {
      flex: 1;
      justify-content: center;
   }
}

/* ==========================================================================
   Tables - Responsive Card Layout
   ========================================================================== */
@media only screen and (max-width: 768px) {

   #track-table,
   #tags-table,
   #location-table,
   #users-table,
   #tasks-table {
      height: auto;
      max-height: calc(100vh - 250px);
      padding: 0 var(--padding-main-mobile);
   }
   
   #track-table table,
   #tags-table table,
   #location-table table,
   #users-table table,
   #tasks-table table {
      display: block;
   }
   
   #track-table table thead,
   #tags-table table thead,
   #location-table table thead,
   #users-table table thead,
   #tasks-table table thead {
      display: none;
      /* Hide table headers on mobile */
   }
   
   #track-table table tbody,
   #tags-table table tbody,
   #location-table table tbody,
   #users-table table tbody,
   #tasks-table table tbody {
      display: flex;
      flex-direction: column;
      gap: 10px;
   }
   
   #track-table table tbody tr,
   #tags-table table tbody tr,
   #location-table table tbody tr,
   #users-table table tbody tr,
   #tasks-table table tbody tr {
      display: flex;
      flex-wrap: wrap;
      padding: 15px;
      background: var(--row-color);
      border-radius: 10px;
      gap: 8px;
      align-items: center;
   }
   
   #track-table table tbody tr:nth-child(even),
   #tags-table table tbody tr:nth-child(even),
   #location-table table tbody tr:nth-child(even),
   #users-table table tbody tr:nth-child(even),
   #tasks-table table tbody tr:nth-child(even) {
      background: var(--row-color);
   }
   
   #track-table table tbody tr:hover,
   #tags-table table tbody tr:hover,
   #location-table table tbody tr:hover,
   #users-table table tbody tr:hover,
   #tasks-table table tbody tr:hover {
      background: #e8e8e8;
   }
   
   #track-table table tbody tr td,
   #tags-table table tbody tr td,
   #location-table table tbody tr td,
   #users-table table tbody tr td,
   #tasks-table table tbody tr td {
      padding: 0;
      line-height: 1.4;
   }
   
   /* Hide row numbers on mobile */
   #track-table table tbody tr td:first-child,
   #tags-table table tbody tr td:first-child,
   #location-table table tbody tr td:first-child,
   #users-table table tbody tr td:first-child,
   #tasks-table table tbody tr td:first-child {
      display: none;
   }
   
   /* Track table specific - card layout */
   #track-table table tbody tr {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto auto;
   }
   
   #track-table table tbody tr td:nth-child(2) {
      /* Brand */
      grid-column: 1;
      grid-row: 1;
      font-weight: 700;
      font-size: 1.1em;
   }
   
   #track-table table tbody tr td:nth-child(3) {
      /* Model */
      grid-column: 1;
      grid-row: 1;
      margin-left: 5px;
   }
   
   #track-table table tbody tr td:nth-child(2)::after {
      content: none;
   }
   
   #track-table table tbody tr td:nth-child(4) {
      /* Chassis */
      grid-column: 1;
      grid-row: 2;
      color: var(--label-color);
      font-size: 0.9em;
   }
   
   #track-table table tbody tr td:nth-child(5) {
      /* Last seen */
      grid-column: 1;
      grid-row: 3;
      font-size: 0.85em;
      color: var(--label-color);
   }
   
   #track-table table tbody tr td:nth-child(6) {
      /* Location */
      grid-column: 2;
      grid-row: 1 / 3;
      text-align: right;
      font-size: 0.9em;
   }
   
   #track-table table tbody tr td:nth-child(7) {
      /* Days */
      grid-column: 2;
      grid-row: 3;
      text-align: right;
      font-size: 0.85em;
   }
   
   #track-table table tbody tr td:nth-child(8),
   /* Battery */
   #track-table table tbody tr td:nth-child(9) {
      /* Status */
      position: absolute;
      right: 15px;
      top: 15px;
   }
   
   #track-table table tbody tr td:nth-child(9) {
      right: 45px;
   }
   
   /* Position relative for absolute children */
   #track-table table tbody tr {
      position: relative;
      padding-right: 80px;
   }
}

/* ==========================================================================
   Track Content - Details Page
   ========================================================================== */
@media only screen and (max-width: 1024px) {
   body {
      overflow: auto;
   }
   
   #track-content {
      width: 95vw;
      flex-direction: column;
      height: auto;
      min-height: calc(100vh - 400px);
   }
   
   #track-content #car-log {
      order: 1;
      border-radius: 10px 10px 0 0;
   }
   
   #track-content #car-info {
      order: 2;
      width: 100%;
      margin-left: 0;
      margin-top: 10px;
      border-radius: 10px;
      padding: 20px;
   }
   
   #track-content #car-tasks {
      order: 3;
      width: 100%;
      margin-left: 0;
      margin-top: 10px;
      border-radius: 10px;
      padding: 20px;
   }
   
   #track-content #car-info ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
   }
   
   #track-content #car-info .btns-container {
      margin-top: 15px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
   }
   
   #track-content #car-info .btns-container button {
      flex: 1;
      min-width: 150px;
      margin: 0;
   }
}

@media only screen and (max-width: 768px) {
   #track-content {
      width: 100vw;
      margin-top: -80px;
   }
   
   #track-content #car-log {
      border-radius: 15px 15px 0 0;
   }
   
   #track-content #car-log #car-log-title {
      padding: 15px var(--padding-main-mobile);
      height: auto;
      min-height: 60px;
   }
   
   #track-content #car-log #car-log-title h1 {
      font-size: 1.3em;
   }
   
   #track-content #car-log #car-log-title h2 a {
      font-size: 0.9em;
   }
   
   #track-content #car-log table {
      display: block;
   }
   
   #track-content #car-log table thead {
      display: none;
   }
   
   #track-content #car-log table tbody {
      display: flex;
      flex-direction: column;
      padding: 0 var(--padding-main-mobile);
      gap: 8px;
   }
   
   #track-content #car-log table tbody tr {
      display: flex;
      flex-wrap: wrap;
      padding: 12px;
      background: var(--row-color);
      border-radius: 8px;
      gap: 5px;
   }
   
   #track-content #car-log table tbody tr td {
      padding: 0;
      line-height: 1.4;
   }
   
   #track-content #car-log table tbody tr td:first-child {
      /* Log type */
      flex: 1 1 100%;
      font-weight: 600;
   }
   
   #track-content #car-log table tbody tr td:nth-child(2) {
      /* Department */
      flex: 1 1 50%;
      font-size: 0.9em;
      color: var(--label-color);
   }
   
   #track-content #car-log table tbody tr td:nth-child(3) {
      /* Location */
      flex: 1 1 50%;
      font-size: 0.9em;
   }
   
   #track-content #car-log table tbody tr td:nth-child(4) {
      /* Last seen */
      flex: 1 1 60%;
      font-size: 0.85em;
      color: var(--label-color);
   }
   
   #track-content #car-log table tbody tr td:nth-child(5) {
      /* Days */
      flex: 1 1 30%;
      font-size: 0.85em;
      text-align: right;
   }
   
   #track-content #car-info ul {
      grid-template-columns: repeat(2, 1fr);
   }
   
   #track-content #car-info .btns-container {
      flex-direction: column;
   }
   
   #track-content #car-info .btns-container button {
      width: 100%;
   }
}

/* ==========================================================================
   Modals - Responsive
   ========================================================================== */
@media only screen and (max-width: 768px) {
   .modal-dialog {
      width: calc(100vw - 20px);
      margin: 10px;
      max-height: calc(100vh - 20px);
   }
   
   .modal-content {
      border-radius: 12px;
      max-height: calc(100vh - 20px);
      overflow-y: auto;
   }
   
   .modal-header {
      padding: 20px 15px 15px;
      position: sticky;
      top: 0;
      background: var(--body-color);
      z-index: 10;
   }
   
   .modal-title {
      font-size: 1.2em;
   }
   
   .modal-body {
      padding: 15px;
   }
   
   .modal-footer {
      padding: 15px;
      position: sticky;
      bottom: 0;
      flex-wrap: wrap;
      gap: 10px;
   }
   
   .modal-footer .btn {
      flex: 1;
      min-width: 100px;
   }
   
   .modal-footer .btn + .btn {
      margin-left: 0;
   }
   
   /* Side modals (settings, notifications) */
   #settings-menu.modal,
   #notification-center.modal {
      width: 100%;
      max-width: 100%;
   }
   
   #settings-menu.modal .modal-dialog,
   #notification-center.modal .modal-dialog {
      width: 100%;
      max-height: 100vh;
   }
}

/* ==========================================================================
   Forms - Mobile Friendly
   ========================================================================== */
@media only screen and (max-width: 768px) {
   fieldset {
      flex-direction: column;
      align-items: stretch;
      margin-bottom: 15px;
   }
   
   fieldset label {
      margin-bottom: 5px;
      min-width: auto;
   }
   
   fieldset input,
   fieldset select,
   fieldset textarea {
      padding: 12px;
      font-size: 16px;
      /* Prevents iOS zoom on focus */
   }
   
   fieldset span {
      flex: none;
      width: 100%;
   }
   
   input[type='search'] {
      font-size: 16px;
      padding: 12px;
   }
}

/* ==========================================================================
   Buttons - Touch Friendly
   ========================================================================== */
@media only screen and (max-width: 768px) {
   .btn {
      min-height: var(--touch-target-min);
      padding: 12px 16px;
      font-size: 0.95em;
   }
   
   .btn-add,
   .btn-remove,
   .btn-enable {
      float: none;
   }
   
   #track-content #car-info .btns-container .manual,
   #track-content #car-info .btns-container .delete,
   #track-content #car-info .btns-container .scheduler,
   #track-content #car-info .btns-container .cancel {
      min-height: var(--touch-target-min);
      padding: 12px 15px;
      text-align: center;
      justify-content: center;
   }
}

/* ==========================================================================
   Notifications Badge - Mobile
   ========================================================================== */
@media only screen and (max-width: 768px) {
   #header #menu #topbar #profile-topbar-menu #right-menubar-notifications span.badge {
      right: -5px;
      top: -2px;
      padding: 2px 5px;
      font-size: 8px;
   }
}

/* ==========================================================================
   Notifier - Mobile
   ========================================================================== */
@media only screen and (max-width: 768px) {
   #notifier span {
      padding: 10px 20px;
      font-size: 0.9em;
      border-radius: 0 0 8px 8px;
   }
}

/* ==========================================================================
   Empty States - Mobile
   ========================================================================== */
@media only screen and (max-width: 768px) {
   #main-content #main-content-empty {
      padding: 20px;
      background-size: 150px;
      background-position: 50% calc(50% - 40px);
   }
   
   #main-content #main-content-empty h1 {
      font-size: 1.2em;
      text-align: center;
      margin-top: 1em;
   }
   
   #main-content #main-content-empty h2 {
      font-size: 1em;
      text-align: center;
   }
}

/* ==========================================================================
   Label Modal - Mobile (if present)
   ========================================================================== */
@media only screen and (max-width: 768px) {
   #labelModal .modal-dialog {
      width: calc(100vw - 20px);
   }
   
   .label-modal-body {
      flex-direction: column;
      gap: 20px;
      padding: 0 15px 15px;
   }
   
   .label-settings {
      min-width: auto;
   }
   
   .margin-grid {
      grid-template-columns: 1fr;
   }
   
   .checkbox-group label {
      flex-basis: calc(50% - 5px);
   }
}

/* ==========================================================================
   Settings Content - Mobile
   ========================================================================== */
@media only screen and (max-width: 1024px) {
   #main-content #settings-content {
      flex-direction: column;
      gap: 20px;
      padding: var(--padding-main-mobile);
   }
   
   #main-content #settings-content > div {
      flex-basis: 100%;
   }
   
   #main-content #settings-content > div.wide {
      flex-basis: 100%;
      flex-direction: column;
   }
   
   #main-content #settings-content > div.wide > div {
      flex-basis: 100%;
   }
}

/* ==========================================================================
   Utility Classes - Mobile
   ========================================================================== */
@media only screen and (max-width: 768px) {
   .hide-mobile {
      display: none !important;
   }
}

@media only screen and (min-width: 769px) {
   .show-mobile-only {
      display: none !important;
   }
}

/* ==========================================================================
   Safe Area Insets (for notched devices)
   ========================================================================== */
@supports (padding: env(safe-area-inset-top)) {
   #header #menu #topbar {
      padding-top: env(safe-area-inset-top);
   }
   
   .modal-content {
      padding-bottom: env(safe-area-inset-bottom);
   }
   
   #main-content {
      padding-bottom: env(safe-area-inset-bottom);
   }
}

/* ==========================================================================
   Touch Feedback
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

   /* Touch devices */
   #track-table table tbody tr:active,
   #tags-table table tbody tr:active,
   .btn:active {
      opacity: 0.7;
      transition: opacity 0.1s;
   }
   
   /* Remove hover effects on touch */
   #track-table table tbody tr:hover,
   #tags-table table tbody tr:hover {
      background: var(--row-color);
   }
   
   #track-table table tbody tr:nth-child(even):hover,
   #tags-table table tbody tr:nth-child(even):hover {
      background: var(--row-color);
   }
}

/* ==========================================================================
   Landscape Phone Adjustments
   ========================================================================== */
@media only screen and (max-height: 500px) and (orientation: landscape) {
   #content-header {
      height: 100px;
   }
   
   #track-header {
      height: 200px;
   }
   
   #main-content {
      margin-top: -40px;
   }
   
   .modal-content {
      max-height: 95vh;
   }
}

/* ==========================================================================
   Print - Hide mobile elements
   ========================================================================== */
@media print {

   #mobile-menu-toggle,
   .windows-controls {
      display: none !important;
   }
}