body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 10px;
    background-color:transparent;
    background-color:black;
    font-family: Arial, Helvetica, sans-serif;
}

/* Fullscreen mode body */
body.fullscreen-mode {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* For Webkit browsers (Chrome, Safari, etc.) */
body::-webkit-scrollbar {
    display: none;
}

/* For all browsers */
html, body {
    scrollbar-width: none;  /* For Firefox */
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
}


.tablet {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    border-radius: 0;
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 0.5fr auto 1fr;
    gap: 0 8px;
    box-shadow: none;
    padding: 0;
    box-sizing: border-box;
    margin: 0;
    position: relative;
    border: none;
}

/* Fullscreen tablet mode */
.tablet.fullscreen.pocketsky-mode {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    background-color: #000;
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 0.5fr auto 1fr;
    gap: 0 8px;
    box-sizing: border-box;
}

.menu-bar {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    background-color: #333;
    border-bottom: 1px solid #555;
    padding: 0 10px;
    height: 40px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}

/* Fullscreen menu bar */
.tablet.fullscreen.pocketsky-mode .menu-bar {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
}

/* Left menu panel - always visible */
.insideRightMenu {
    width: 280px;
    height: 100vh;
    background-color: #333;
    border-radius: 0;
    border-right: 2px solid #555;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 1 / -1;
    flex-shrink: 0;
}

.tablet.fullscreen.pocketsky-mode .insideRightMenu {
    width: 280px;
    height: 100vh;
    grid-column: 1;
    grid-row: 1 / -1;
    flex-shrink: 0;
}

.screen {
    flex: 1;
    background-color: #000;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 2;
    width: 100%;
}

/* Fullscreen screen - flexible height */
.tablet.fullscreen.pocketsky-mode .screen {
    height: auto;
    max-height: none;
    flex: 1;
    border-radius: 0;
    margin: 0;
    border: none;
    grid-column: 2;
    grid-row: 2;
    width: 100%;
}






.table-container {
    width: 100%;
    height: 100%;
    flex: 1;
    background-color: #000;
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 4;
}

/* Expanded table when keyboard is collapsed in pocketsky mode */
.table-container.expanded-table {
    flex: 1.5;
}

/* Fullscreen table container - flexible height */
.tablet.fullscreen.pocketsky-mode .table-container {
    height: 100%;
    flex: 1;
    border-radius: 0;
    margin: 0;
    border: none;
    grid-column: 2;
    grid-row: 4;
}

.footer-bar {
    display: none;
    width: 100%;
    height: 40px;
    margin: 0;
    background-color: #222;
    border-top: 1px solid #555;
    padding: 0 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Fullscreen footer bar - hidden */
.tablet.fullscreen.pocketsky-mode .footer-bar {
    display: none;
}

/* Right-aligned elements repositioning for fullscreen */
.tablet.fullscreen.pocketsky-mode .rightIcons {
    margin-left: auto;
    width: auto; /* Changed from 20px - was clipping icons */
    min-width: 80px;
}

.tablet.fullscreen.pocketsky-mode .footer-span {
    display: flex;
    align-items: center;
    justify-content: center; /* Center align text in fullscreen mode */
    white-space: nowrap; /* Prevent wrapping only in fullscreen */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure icons container has enough space in fullscreen */
.tablet.fullscreen.pocketsky-mode .icons-span {
    width: 50%;
    padding-right: 15px;
}

.footer-content {
    color: white;
    font-size: 18px;
}

/* Additional fullscreen layout adjustments */
.tablet.fullscreen.pocketsky-mode {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

/* Ensure content sections take available space */
.tablet.fullscreen.pocketsky-mode .screen,
.tablet.fullscreen.pocketsky-mode .table-container {
    min-height: 200px; /* Minimum height for usability */
}

/* Responsive fullscreen behavior for very wide screens */
@media (min-width: 1200px) {
    .tablet.fullscreen.pocketsky-mode .screen,
    .tablet.fullscreen.pocketsky-mode .table-container {
        max-height: 50vh;
    }
}

/* Ensure proper spacing in fullscreen */
.tablet.fullscreen.pocketsky-mode .menu-bar,
.tablet.fullscreen.pocketsky-mode .footer-bar {
    flex-shrink: 0; /* Don't shrink these elements */
}


/*************** Drop down menus ***************/

/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Fullscreen dropdown adjustments */
.tablet.fullscreen.pocketsky-mode .dropdown {
    margin: 0 5px;
}

/* Fullscreen dropdown button styling */
.tablet.fullscreen.pocketsky-mode .dropbtn {
    background-color: #222222;
}

/* Dropdown button */
.dropbtn {
    background-color: #333;
    color: white;
    font-size: small;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(200, 196, 196, 0.2);
    z-index: 5000;
    font-size: small;
    width: 160px;
    border-radius: 0;
}

/* Mobile dropdown backdrop */
@media (max-width: 768px) {
    /* Create backdrop when dropdown is open */
    .tablet.fullscreen.pocketsky-mode .dropdown-content::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: -1;
    }
    
    /* Ensure dropdown shows above backdrop */
    .tablet.fullscreen.pocketsky-mode .dropdown-content {
        z-index: 10000;
    }
}




/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.dropdown-narrow {
    width: 100px;
}

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

/* Show the dropdown menu on hover (desktop) */
@media (min-width: 769px) {
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #575757;
    }
}

/* Mobile: Show dropdown on click (handled by JavaScript) */
@media (max-width: 768px) {
    .tablet.fullscreen.pocketsky-mode .dropdown.active .dropdown-content {
        display: block;
    }
    
    .tablet.fullscreen.pocketsky-mode .dropdown.active .dropbtn {
        background-color: #575757;
    }
}

/*************** ***************/

.fas {
    padding-left: 5px;
    padding-right: 5px;
}

#ATSULabel {
    font-weight: bold;
    width: 80px;


}

.ATSUSpan {
    width:120px;
    padding-left: 2px;

}

.tabulator {
    width:100%;
    height: 100%;
    white-space: normal;
    word-wrap: break-word;
}

.tabulator-cell {
    white-space: normal;
    word-wrap: break-word;
}

.tabulator .tabulator-tableHolder {
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: black;
}

.tabulator .tabulator-tableHolder::-webkit-scrollbar {
    display: none;
}


/***** Blink *****/
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  /* Blinking class */
  .blink {
    animation: blink 1s step-start infinite;
  }

  /*    footer */
.footer-span {
    display: inline-block;
    width: 25%; /* Reduced width for span1 and span2 */
    color: white;
    text-align: left; /* Left align text in normal mode */
    /* Allow wrapping in normal mode */
}

/* Icons span gets more width for multiple icons */
.icons-span {
    display: inline-block;
    width: 50%; /* Increased width for icon container */
    color: white;
    text-align: center;
}


#span2 {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11pt;
    font-family: B612;
    line-height: 1.2;
}





#clockSpan {
 /*   padding-left:60px; */
    right: 11px; 
    top: 0px;
    z-index: 5000;
    color: greenyellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 

 }

.screenImage{
    background-color: #151415;
    align-items: center;
    justify-content: center;
    display: flex;
    margin: 0;
    font-family: Arial, sans-serif;
    overflow: hidden;

}

#ACARSIndicator {
    padding-left: 20px;
}


.pdcSync {
    color: white;
    position: absolute;
    font-size: medium;
    z-index: 5000;
    left: 35;
    top: 5;
}


.simple-keyboard.hg-layout-default .hg-button.hg-green {


    background-color: darkgreen;
    color: white;
}

.simple-keyboard.hg-layout-default .hg-button.hg-red {
    background-color: rgba(173, 22, 22, 0.915);
    color: white;
}

.simple-keyboard.hg-layout-default .hg-button.hg-amber {
    background-color:rgba(194, 132, 25, 0.64);
    color: white;
}


  .label.hg-cyan {
    color:cyan
}

#acarStatus.label.hg-cyan {
    color:rgb(38, 255, 0)
}



.label.hg-white {
    color:rgb(255, 255, 255)
}


/*   cookie banner */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgb(97 95 96 / 93%);
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 16px;
    z-index: 9999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: none;
}

.cookie-banner p {
    margin: 0;
    padding-right: 20px;
    flex-grow: 1;
}

.cookie-banner button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.cookie-banner button:hover {
    background-color: #45a049;
}

/*   overlaytext */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark background with transparency */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top of everything */
    opacity: 0;
    transition: opacity 0.5s ease; /* Smooth fade-in and fade-out */
}

/* Visible state */
.overlay.show {
    display: flex;
    opacity: 1;
}

/* Image inside the overlay */
.overlay-image {
    max-width: 100%;
    max-height: 80%;
    border: 3px solid white;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5);
    cursor: pointer; /* Indicate the user can click */
}

.closeOverlay{
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 24px;
    cursor: pointer;
}


/** version */
.versiondiv {
    position:absolute;
    left:0px;
    bottom:0px;
    padding-bottom: 5px;
    color:rgb(206, 205, 205);
    font-size: smaller;    
    opacity: 0;
    transition: opacity 10s ease;
    display: none;
}


  .fade-out {
    opacity: 0;
  }


  .fade-out {
    opacity: 0;
  }

  /*** Tooltip ***/ 
   /* Tooltip text */
   .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 800;
    font-size: small;
    font-weight: lighter;
}
.tooltip_left {
    top: 0px;      
    right: 50px;
    font-size: medium;
      
}

.tooltip_right {
    top: 0px;      
    left: 40px;
    font-size: medium;
      
}

.tooltip_top {
    bottom: 70px;      
    font-size: medium;
    left:-60px;      
}

.tooltip_bottom {
    top: 50px;      
    font-size: medium;
    right:0px;
      
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    z-index: 800;
}

.bottomIcon {
    padding-left: 8px;
    padding-right: 8px;
}

/* Additional spacing for fullscreen mode */
.tablet.fullscreen.pocketsky-mode .bottomIcon {
    padding-left: 10px;
    padding-right: 10px;
}

i:hover {
    cursor: pointer;
}

/**** flight ID *****/
#flight_id {    
    color: rgb(255, 255, 255);
    font-family: 'B612';
    display: block;
    text-align: center;
}

#CALLSIGN {
   min-width:120px;
   width:120px
}

.callsign {
    min-width:100px;
    width:100px
 }

.ICAO {
    min-width: 65px;
}

/* #aboutDropdown {
    position: relative;
    display: block;
    margin-right: 10px;
} */

/**** Mobile-specific styles for fullscreen + pocketsky mode ****/
/* Applies to ALL screen sizes when .tablet.fullscreen.pocketsky-mode is present */

/* Only apply these styles when in fullscreen mode (which requires pocketsky=1 for this scenario) */
body.fullscreen-mode {
    font-size: 14px;
    overflow-x: hidden;
}

/* Prevent horizontal scroll */
.tablet.fullscreen.pocketsky-mode {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure all child elements respect viewport width */
.tablet.fullscreen.pocketsky-mode * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Improve touch targets for mobile - but not for menu items */
.tablet.fullscreen.pocketsky-mode button:not(.dropbtn) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Menu buttons need proper touch targets but compact display */
.tablet.fullscreen.pocketsky-mode .dropbtn {
    min-height: 32px;
    min-width: 60px;
    padding: 6px 8px;
    cursor: pointer;
    touch-action: manipulation;
}

/* Icons in right menu need proper touch targets */
.tablet.fullscreen.pocketsky-mode .rightIcons i {
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
}

/* Exception for small icons in footer */
.tablet.fullscreen.pocketsky-mode .bottomIcon {
    min-height: 36px;
    min-width: 36px;
}

.tablet.fullscreen.pocketsky-mode .menu-bar {
    height: auto;
    min-height: 40px;
    padding: 4px 6px;
    flex-wrap: nowrap;
    font-size: 10px;
    justify-content: space-between;
    gap: 4px;
    overflow: visible;
}

.tablet.fullscreen.pocketsky-mode .leftIcons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tablet.fullscreen.pocketsky-mode .leftIcons::-webkit-scrollbar {
    display: none;
}

.tablet.fullscreen.pocketsky-mode .rightIcons {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 4px;
}

/* Ensure right icons container is always visible */
.tablet.fullscreen.pocketsky-mode .rightIcons {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make sure individual icon elements are visible */
.tablet.fullscreen.pocketsky-mode .rightIcons > * {
    visibility: visible !important;
    display: inline-flex !important;
}

/* Allow ACARS indicator to have dynamic opacity set by JavaScript */
.tablet.fullscreen.pocketsky-mode #ACARSIndicator {
    /* Don't force opacity - let JavaScript control it */
}

.tablet.fullscreen.pocketsky-mode .menuItem {
    font-size: 10px;
    white-space: nowrap;
    padding: 0 4px;
}

.tablet.fullscreen.pocketsky-mode .dropdown {
    margin: 0;
    position: relative;
    flex-shrink: 0;
}

.tablet.fullscreen.pocketsky-mode .dropbtn {
    font-size: 9px;
    padding: 5px 6px;
    white-space: nowrap;
    background-color: #222;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    min-height: 30px;
    min-width: auto;
}

.tablet.fullscreen.pocketsky-mode .menuItem {
    font-size: 9px;
    padding: 0 3px;
}

/* Mobile dropdown - full width overlay style */
.tablet.fullscreen.pocketsky-mode .dropdown-content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 280px;
    max-width: 90vw;
    font-size: 13px;
    border-radius: 12px;
    max-height: 70vh;
    overflow-y: auto;
    background-color: #2a2a2a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.tablet.fullscreen.pocketsky-mode .dropdown-content a {
    padding: 14px 20px;
    white-space: nowrap;
    font-size: 13px;
    display: block;
    border-bottom: 1px solid #444;
}

.tablet.fullscreen.pocketsky-mode .dropdown-content a:last-child {
    border-bottom: none;
}

/* Right icons should not wrap or overflow */
.tablet.fullscreen.pocketsky-mode .rightIcons > * {
    flex-shrink: 0;
}

/* Right icons - smaller but still tappable and VISIBLE */
.tablet.fullscreen.pocketsky-mode .rightIcons i {
    font-size: 16px;
    padding: 2px;
    min-height: 32px;
    min-width: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 1;
    visibility: visible !important;
}

/* ACARS Indicator icon must inherit color from parent span and not force opacity */
.tablet.fullscreen.pocketsky-mode #ACARSIndicator i {
    color: currentColor !important;
    opacity: 1 !important; /* But let parent opacity control overall visibility */
}

/* Ensure all right icons are visible with proper styling */
.tablet.fullscreen.pocketsky-mode .rightIcons i,
.tablet.fullscreen.pocketsky-mode .rightIcons .fa-sync,
.tablet.fullscreen.pocketsky-mode .rightIcons .fa-sync-alt,
.tablet.fullscreen.pocketsky-mode .rightIcons .fa-rotate,
.tablet.fullscreen.pocketsky-mode .rightIcons .fa-times,
.tablet.fullscreen.pocketsky-mode .rightIcons .fa-close,
.tablet.fullscreen.pocketsky-mode .rightIcons .fa-circle-xmark,
.tablet.fullscreen.pocketsky-mode .rightIcons .fa-xmark,
.tablet.fullscreen.pocketsky-mode .rightIcons .fa-signal {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: white !important;
    background: transparent !important;
}

/* ACARS Indicator needs dynamic color and opacity - don't force white */
.tablet.fullscreen.pocketsky-mode #ACARSIndicator i,
.tablet.fullscreen.pocketsky-mode #ACARSIndicator .fa-wifi {
    color: currentColor !important;
}

.tablet.fullscreen.pocketsky-mode #ACARSIndicator {
    opacity: 1;
}

/* Specifically target any close/x icons */
.tablet.fullscreen.pocketsky-mode .rightIcons [class*="close"],
.tablet.fullscreen.pocketsky-mode .rightIcons [class*="xmark"],
.tablet.fullscreen.pocketsky-mode .rightIcons [class*="times"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: white !important;
}

/* Screen area adjustments */
.tablet.fullscreen.pocketsky-mode .screen {
    padding: 8px;
    font-size: 14px;
    min-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Ensure content in screen doesn't overflow */
.tablet.fullscreen.pocketsky-mode .screen > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Table container adjustments - FIT CONTENT */
.tablet.fullscreen.pocketsky-mode .table-container {
    min-height: 200px;
    font-size: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Message table styling */
#message-table {
    width: 100%;
    height: 100%;
}

/* Ensure table fits content */
.tablet.fullscreen.pocketsky-mode #message-table {
    flex: 0 1 auto;
    overflow: visible;
    height: auto !important;
}

/* Footer adjustments */
.tablet.fullscreen.pocketsky-mode .footer-bar {
    height: auto;
    min-height: 40px;
    padding: 8px 10px;
    flex-wrap: wrap;
}

.tablet.fullscreen.pocketsky-mode .footer-content {
    font-size: 14px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.tablet.fullscreen.pocketsky-mode .footer-span {
    font-size: 12px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

.tablet.fullscreen.pocketsky-mode .icons-span {
    width: auto;
    padding-right: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.tablet.fullscreen.pocketsky-mode .bottomIcon {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 16px;
}

/* Icon adjustments */
.tablet.fullscreen.pocketsky-mode .fas,
.tablet.fullscreen.pocketsky-mode .fa-solid,
.tablet.fullscreen.pocketsky-mode .fa-regular {
    font-size: 16px;
}

/* Header icons (WX, etc) need special sizing */
.tablet.fullscreen.pocketsky-mode .menu-bar .fas,
.tablet.fullscreen.pocketsky-mode .menu-bar .fa-solid,
.tablet.fullscreen.pocketsky-mode .menu-bar .fa-regular {
    font-size: 14px;
}

/* WX cloud icon specific */
.tablet.fullscreen.pocketsky-mode .fa-cloud,
.tablet.fullscreen.pocketsky-mode .fa-cloud-sun {
    font-size: 18px;
    margin-right: 4px;
}

/* ATSU Label adjustments */
#ATSULabel {
    font-size: 12px;
    min-width: 60px;
    width: auto;
}

.ATSUSpan {
    font-size: 12px;
    width: auto;
    min-width: 80px;
    padding-left: 2px;
}

/* Clock span adjustments */
#clockSpan {
    font-size: 12px;
    position: static;
    padding-left: 10px;
}

/* Callsign adjustments */
#CALLSIGN {
    min-width: 80px;
    width: auto;
}

.callsign {
    min-width: 80px;
    width: auto;
}

.ICAO {
    min-width: 50px;
}

/* ==================== MOBILE CARD VIEW ==================== */
/* Applies to ALL screen sizes when fullscreen+pocketsky mode is active */
/* This ensures tablets and larger devices also get the card view */

/* Table container - TAKE HALF THE SPACE */
.tablet.fullscreen.pocketsky-mode .table-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    padding: 8px 8px 0px 8px !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #000000 !important; /* Black background */
}

/* Hide table headers */
.tablet.fullscreen.pocketsky-mode .tabulator-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

/* Tabulator container */
.tablet.fullscreen.pocketsky-mode .tabulator {
    display: block !important;
    width: 100% !important;
    background-color: transparent !important;
}

.tablet.fullscreen.pocketsky-mode .tabulator-tableholder {
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

.tablet.fullscreen.pocketsky-mode .tabulator-table {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* CRITICAL: Override Tabulator's fixed 200px height */
.tablet.fullscreen.pocketsky-mode #message-table,
.tablet.fullscreen.pocketsky-mode .tabulator,
.tablet.fullscreen.pocketsky-mode .tabulator-tableholder {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* CARD: Each row is a card - COMPACT, VARIABLE HEIGHT */
.tablet.fullscreen.pocketsky-mode .tabulator-row {
    display: block !important;
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    padding: 26px 10px 4px 26px !important;
    margin-bottom: 6px !important;
    cursor: pointer !important;
    min-height: auto !important;
    height: auto !important;
    position: relative !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    width: auto !important;
}

/* ALL CELLS: Reset base styling */
.tablet.fullscreen.pocketsky-mode .tabulator-cell {
    display: inline-block !important;
    vertical-align: top !important;
    padding: 0 6px 10px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

/* GREEN LABELS */
.tablet.fullscreen.pocketsky-mode .tabulator-cell::before {
    content: attr(tabulator-field) !important;
    display: block !important;
    font-weight: 700 !important;
    color: #00ff00 !important;
    margin-bottom: 4px !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
}

/* CELL 1: Status icon - top left */
.tablet.fullscreen.pocketsky-mode .tabulator-row .tabulator-cell:nth-child(1) {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    font-size: 20px !important;
}

.tablet.fullscreen.pocketsky-mode .tabulator-row .tabulator-cell:nth-child(1)::before {
    display: none !important;
}

/* CELLS 2-4: Time, Sender, Recipient (3 columns) */
.tablet.fullscreen.pocketsky-mode .tabulator-row .tabulator-cell:nth-child(2) {
    width: 30% !important;
    display: inline-block !important;
}

.tablet.fullscreen.pocketsky-mode .tabulator-row .tabulator-cell:nth-child(3) {
    width: 30% !important;
    display: inline-block !important;
}

.tablet.fullscreen.pocketsky-mode .tabulator-row .tabulator-cell:nth-child(4) {
    width: 30% !important;
    display: inline-block !important;
}

/* Hide Delete column (last cell) */
.tablet.fullscreen.pocketsky-mode .tabulator-row .tabulator-cell:last-child {
    display: none !important;
    visibility: hidden !important;
}

/* CELLS 5+: Full width rows - NO BORDER, COMPACT */
.tablet.fullscreen.pocketsky-mode .tabulator-row .tabulator-cell:nth-child(n+5) {
    display: block !important;
    width: 100% !important;
    padding-top: 4px !important;
    margin-top: 4px !important;
}

/* WHITE TRASH ICON: Top right - SMALLER */
.tablet.fullscreen.pocketsky-mode .tabulator-row::after {
    content: "\f2ed" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    color: white !important;
    font-size: 14px !important;
    cursor: pointer !important;
    z-index: 100 !important;
}

/* Hide inline trash icons */
.tablet.fullscreen.pocketsky-mode .tabulator-cell .fa-trash,
.tablet.fullscreen.pocketsky-mode .tabulator-cell .fa-trash-alt {
    display: none !important;
    visibility: hidden !important;
}

/* Additional mobile-only styles (not card view) */
@media (max-width: 768px) {
    /* Ensure tooltips don't break layout on mobile */
    .tooltiptext {
        font-size: 11px;
        width: 100px;
    }
    
    /* Version div positioning */
    .versiondiv {
        font-size: 10px;
        padding-bottom: 3px;
    }
}

/* Extra small devices (iPhone SE, etc.) */
@media (max-width: 375px) {
    body.fullscreen-mode {
        font-size: 12px;
    }
    
    .tablet.fullscreen.pocketsky-mode .menu-bar {
        padding: 2px 4px;
        min-height: 36px;
        gap: 4px;
    }
    
    .tablet.fullscreen.pocketsky-mode .menuItem {
        font-size: 9px;
        padding: 0 2px;
    }
    
    .tablet.fullscreen.pocketsky-mode .dropbtn {
        font-size: 9px;
        padding: 4px 6px;
        min-height: 28px;
        min-width: 50px;
    }
    
    .tablet.fullscreen.pocketsky-mode .dropdown-content {
        min-width: 240px;
        font-size: 12px;
    }
    
    .tablet.fullscreen.pocketsky-mode .dropdown-content a {
        padding: 12px 16px;
        font-size: 12px;
    }
    
    /* Make right icons more compact on small screens */
    .tablet.fullscreen.pocketsky-mode .rightIcons i {
        font-size: 16px;
        min-height: 36px;
        min-width: 36px;
        padding: 2px;
    }
    
    .tablet.fullscreen.pocketsky-mode .footer-content {
        font-size: 12px;
    }
    
    .tablet.fullscreen.pocketsky-mode .footer-span {
        font-size: 11px;
    }
    
    .tablet.fullscreen.pocketsky-mode .bottomIcon {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 14px;
    }
    
    .tablet.fullscreen.pocketsky-mode .screen {
        min-height: 120px;
        font-size: 12px;
    }
    
    .tablet.fullscreen.pocketsky-mode .table-container {
        min-height: 0 !important;
    }
    
    /* Card layout adjustments for smallest screens - COMPACT */
    .tablet.fullscreen.pocketsky-mode .tabulator-row {
        padding: 24px 8px 4px 24px !important;
        margin-bottom: 6px !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    .tablet.fullscreen.pocketsky-mode .tabulator-cell {
        font-size: 10px !important;
        padding: 0 4px 8px 0 !important;
    }
    
    .tablet.fullscreen.pocketsky-mode .tabulator-cell::before {
        font-size: 8px !important;
    }
    
    .tablet.fullscreen.pocketsky-mode .tabulator-row .tabulator-cell:nth-child(1) {
        font-size: 18px !important;
        top: 8px !important;
        left: 8px !important;
    }
    
    .tablet.fullscreen.pocketsky-mode .tabulator-row::after {
        font-size: 14px !important;
        top: 8px !important;
        right: 8px !important;
    }
    
    /* Right icons even more compact on smallest screens */
    .tablet.fullscreen.pocketsky-mode .rightIcons i {
        font-size: 16px;
        min-height: 36px;
        min-width: 36px;
        padding: 2px;
    }
    
    /* Mobile close icon styling - FORCE VISIBLE AND ON TOP */
    #mobile-close-icon,
    .mobile-close-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        background-color: transparent !important;
        font-size: 18px !important;
        z-index: 10000 !important;
        position: relative !important;
    }
    
    /* Ensure rightIcons is on top */
    .tablet.fullscreen.pocketsky-mode .rightIcons {
        z-index: 9999 !important;
        position: relative !important;
    }
}

/* Mobile device specific overrides when combined with fullscreen mode */
body.fullscreen-mode.mobile-device {
    overflow: hidden;
}

.tablet.fullscreen.mobile-device {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Ensure menu items wrap properly on very small screens */
@media (max-width: 375px) {
    .tablet.fullscreen.pocketsky-mode .menu-bar {
        font-size: 10px;
    }
    
    .tablet.fullscreen.pocketsky-mode .menuItem {
        font-size: 10px;
    }
    
    /* Make dropdown menus more compact */
    .tablet.fullscreen.pocketsky-mode .dropdown-content {
        min-width: 120px;
        font-size: 10px;
    }
    
    .tablet.fullscreen.pocketsky-mode .dropdown-content a {
        padding: 8px 10px;
    }
}

/* Prevent text selection on interactive elements in mobile */
/* User select and tap highlight styles for touch devices */
.tablet.fullscreen.pocketsky-mode .menu-bar,
.tablet.fullscreen.pocketsky-mode .footer-bar,
.tablet.fullscreen.pocketsky-mode button,
.tablet.fullscreen.pocketsky-mode .dropbtn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ===========================
   MOBILE HAMBURGER MENU
   =========================== */

.mobile-menu {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background-color: #222;
    z-index: 10000;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}

.mobile-menu.open {
    left: 0;
}

.mobile-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
}

.mobile-menu-backdrop.open {
    display: block;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #333;
    color: white;
    border-bottom: 1px solid #444;
}

.mobile-menu-section {
    border-bottom: 1px solid #333;
    padding: 12px 0;
}

.mobile-menu-title {
    padding: 12px 16px;
    font-weight: bold;
    color: #adff2f;
    font-size: 14px;
    text-transform: uppercase;
}

.mobile-menu-section a {
    display: block;
    padding: 12px 16px 12px 32px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
}

.mobile-menu-section a:hover,
.mobile-menu-section a:active {
    background-color: #333;
}

.mobile-menu-section a i {
    margin-right: 8px;
    width: 20px;
    display: inline-block;
}

/* Mobile menu icons styling */
#mobile-hamburger,
#mobile-refresh {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    min-height: 40px !important;
    cursor: pointer !important;
}

/* Left icons display */
.tablet.fullscreen.pocketsky-mode .leftIcons {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Hamburger menu always visible in pocketsky mode */
/* (Removed min-width media query that was hiding it on tablets) */