/* Global antique white theme */
body {
    background-color: #faf6f0; /* Antique white */
}

/* Ensure all pages inherit the antique white theme */
html {
    background-color: #faf6f0; /* Antique white */
}

:root {
    --journey-select-width: 220px;
}

/* Global text color for better readability on antique white */
body, p, div, span, label, input, textarea, select {
    color: #5d4e37; /* Muted brown for antique white */
}

/* Global border color */
input, textarea, select, .form-control {
    border-color: #e8dcc8; /* Antique white border */
}

/* Global focus states */
input:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: #8b7355; /* Muted brown */
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.25);
}

p{
    margin:auto;
}
input[type=checkbox]{
    margin:20px;
}

button[type=submit]{
    margin:20px;
}

.user{
    align-self: flex-end;
    align-items: flex-end;
    text-align: end !important;
}

#dialog{

}
/*--hi--*/
  .required:after {
    content:" *";
    color: #dc3545;
  }

.center{
    margin-right: auto;
    margin-left: auto;
    text-align: center
}


#menu{
     background-color: #5d4e37 !important; /* Muted brown */
     color: #faf6f0 !important; /* Antique white for legibility */
    display:table-row;
}
.topnav {

  background: linear-gradient(135deg, #5d4e37 0%, #7a6f5e 50%, #5d4e37 100%); /* Muted brown gradient */
  overflow: visible;
  width: 800px; /* Wider to accommodate all menu items */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(93, 78, 55, 0.3);
  padding: 0 20px;
  flex-wrap: nowrap; /* Prevent wrapping to ensure single line */
  height: 46px; /* Fixed height */
  border: 1px solid rgba(250, 246, 240, 0.1);
}

/* Style the links inside the navigation bar */
.topnav a {
  display: inline-block;
  color: #faf6f0; /* Antique white */
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  float: none;
  margin: 0 1px;
  border-radius: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* Prevent shrinking */
}

/* Special styling for main navigation items */
.topnav a:not(.login) {
  background-color: rgba(139, 115, 85, 0.1);
  border: 1px solid rgba(250, 246, 240, 0.2);
  backdrop-filter: blur(10px);
}

.topnav a:not(.login):hover {
  background-color: rgba(139, 115, 85, 0.3);
  border-color: rgba(250, 246, 240, 0.4);
}

/* Add subtle separator before login/logout */
.topnav a.login::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: linear-gradient(to bottom, transparent, rgba(250, 246, 240, 0.3), transparent);
}

.topnav a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(250, 246, 240, 0.1), transparent);
  transition: left 0.5s;
}

.topnav a:hover::before {
  left: 100%;
}

/* Navigation entrance animation removed */

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #8b7355; /* Muted brown */
  color: #faf6f0; /* Antique white */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.4);
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #7a6f5e; /* Muted brown-green */
  color: #faf6f0; /* Antique white */
}
.list{
    display: table;
}
.cell{
    display: table-cell;
    padding:20px;
    word-wrap: break-word;
    width: 100px;
}
.row{
    display: table-row;
    border-bottom: 1px solid #e8dcc8; /* Antique white border */

}
 .card-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            padding: 20px;
            max-width: 800px; /* Match content div width */
            margin: 0 auto;
        }
        
        /* Ensure pagination and other containers match content width */
        .pagination-container,
        .messages-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .k-card {
            width: 300px;
            margin: 20px;
            background: #faf6f0; /* Antique white */
            border-radius: 12px;
            box-shadow: 
                0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06),
                0 0 0 1px rgba(250, 246, 240, 0.8);
            border: 1px solid rgba(250, 246, 240, 0.2);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .k-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
            border-radius: 12px;
            pointer-events: none;
        }
        
        .k-card:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 10px 25px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.05),
                0 0 0 1px rgba(255, 255, 255, 0.9);
        }
        
        .k-card-title {
            text-align: center;
            margin: 0;
            padding: 20px 20px 10px 20px;
            font-size: 18px;
            font-weight: 600;
            color: #5d4e37; /* Muted brown for antique white */
            border-bottom: 1px solid #e8dcc8;
        }
        
        .k-card-body {
            padding: 20px;
            text-align: center;
        }
        
        .k-card-body p {
            margin: 8px 0;
            color: #7a6f5e; /* Muted brown text */
            font-size: 14px;
        }
        
        .k-card-body p:first-of-type {
            margin-bottom: 5px;
            line-height: 1.2;
        }
        
        .card-value {
            font-size: 24px !important;
            color: #8b7355 !important; /* Muted brown for antique white */
            font-weight: 700 !important;
            margin: 15px 0 !important;
        }
        
        .k-card img {
            width: 64px;
            height: 64px;
            margin: 10px auto;
            display: block;
        }
        
        .k-card-footer {
            text-align: center;
        }
        
        /* Custom button styling for dashboard cards */
        .k-card .k-button {
            width: 100% !important;
            margin-top: 15px;
            padding: 12px 20px !important;
            background: #8b7355 !important; /* Muted brown */
            color: #faf6f0 !important; /* Antique white text */
            border: 2px solid #8b7355 !important;
            border-radius: 8px !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            transition: all 0.3s ease !important;
            text-transform: none !important;
            box-shadow: 0 2px 4px rgba(139, 115, 85, 0.2) !important;
        }
        
        .k-card .k-button:hover {
            background: #faf6f0 !important; /* Antique white background */
            color: #8b7355 !important; /* Muted brown text */
            border-color: #8b7355 !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(139, 115, 85, 0.3) !important;
        }
        
        .k-card .k-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(139, 115, 85, 0.2) !important;
        }

        /* Pagination styles */
        .pagination-controls {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f5f1eb; /* Slightly darker antique white */
            border-radius: 8px;
        }

        .pagination-controls label {
            margin-right: 10px;
            font-weight: bold;
        }

        .pagination-controls select {
            padding: 5px 10px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            background-color: #faf6f0; /* Antique white */
        }

        .pagination {
            margin-top: 20px;
            text-align: center;
        }

        .pagination .page-link {
            display: inline-block;
            padding: 8px 12px;
            margin: 0 2px;
            text-decoration: none;
            color: #8b7355; /* Muted brown */
            border: 1px solid #8b7355;
            border-radius: 4px;
            background-color: #faf6f0; /* Antique white */
        }

        .pagination .page-link:hover {
            background-color: #8b7355; /* Muted brown */
            color: #faf6f0; /* Antique white */
            text-decoration: none;
        }

        .pagination .current-page {
            display: inline-block;
            padding: 8px 12px;
            margin: 0 2px;
            background-color: #8b7355; /* Muted brown */
            color: #faf6f0; /* Antique white */
            border: 1px solid #8b7355;
            border-radius: 4px;
        }

        .k-card-action>.k-button {
            width:100%;
        }
.logos{
    overflow: auto;
    text-align: center;
    margin: 15px 0;
}
#banner img{
  width: 500px;
  display: block;
  margin: 0 auto;
}
#banner{
  background-color: #f5f1eb; /* Slightly darker antique white */
  width: 800px; /* Match navigation width */
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  text-align: center;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 2px 8px rgba(93, 78, 55, 0.1);
  padding: 20px;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
.logo_preview{
        align-items: center;
    align-content: center;
    text-align: center;
    background-color: #f5f1eb; /* Slightly darker antique white */
    padding: 20px;
    border-radius: 8px;
}

.logo_preview img{
    width:128px;
}

.styledTB {
   position: relative;
    display: inline-block;
    height: 200px;  /* Arbitrary number */
    width: 600px; /* Arbitrary number */
}
.styledTB textarea {
    width: 400px; /* Arbitrary number */
    height: 200px;
    padding-right: 0px;
    box-sizing: border-box;
    padding-bottom:20px;
}
/* 
.k-avatar-image{
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 120px;
} */

.start{
    display:block;
}
.checkbox-label{
    display:inline-flex;
}
.pro-tip{
    font-size: small;
    display: block;
    background-color: #8b7355; /* Muted brown */
    color: #faf6f0; /* Antique white */
    margin: 20px auto;
    padding:15px;
    width:375px;
    line-height: 24px;
}

.optional {
    border: 1px solid #e8dcc8; /* Antique white border */
    padding: 5px;
    background-color: #f0ebe3; /* Even darker antique white */
}
.styledTB img {
    height: 100%;
    width: 200px; /* Or however long you'd like your button to be, matches padding-right above */
    border: none;
    opacity: 30%;
    background-color: transparent;
    position: absolute;
    right: 0px;
    top: 0;
}
.validate{

}
label {display:block;clear:both;max-width: 400px; word-wrap: break-word;font-weight:lighter;padding-top:10px}
html, body {
    height: 100%;
}
#login{

    border: #e8dcc8 2px inset; /* Antique white border */
    padding: 20px;
    margin-bottom:40px;

}
#betaform{

    border: #e8dcc8 2px inset; /* Antique white border */
    padding: 20px;

}
html{
    background-color: #5d4e37 !important;
    color: #faf6f0 !important;
}
body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    display: block;
    margin: 0;
    min-height: 100vh;
    background-color: #5d4e37; /* Dark side gutters around centered content */
}

#content {
    position: relative;
    margin-top: 255px; /* Align with bottom of nav bar/banner region */
    left: 50%;
    transform: translateX(-50%);
    background-color: #faf6f0; /* Antique white */
    width: 830px; /* Match navigation width */
    overflow: visible;
}

#content-inner{
    overflow: visible;
    height: auto;
    box-sizing: border-box; /* Ensure padding/margins don't extend beyond parent */
}
/* Site footer: bottom of main content column (inside #content); not a floating strip */
.site-footer {
    overflow: visible;
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #f5f1eb;
    margin: 0;
    padding: 16px 20px 18px;
    border-radius: 0 0 12px 12px;
    border-top: 1px solid #e8dcc8;
    box-shadow: 0 4px 12px rgba(93, 78, 55, 0.08);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #5d4e37;
}


p
{
  display:block;clear:both;max-width: 400px; word-wrap: break-word;
}
.child-tag{
    display: none;
    padding-left: 87px;
    border :1px #e8dcc8 solid; /* Antique white border */
    padding-bottom: 40px;
}
.child-tag h4{
    text-align: center;
}
.login{
    float: right !important;
    background-color: #7a6f5e !important; /* Muted brown-green */
    border: 2px solid #faf6f0 !important; /* Antique white border */
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-size: 13px !important;
}

.login::before {
    content: "🚪 "; /* Door icon for logout */
    margin-right: 4px;
}

.login:hover {
    background-color: #5d4e37 !important; /* Darker muted brown */
    color: #faf6f0 !important; /* Antique white for legibility */
    border-color: #8b7355 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(139, 115, 85, 0.5) !important;
}
#beta{
display:none;
}
label[for=beta]{
display:none;
}
#signup{
    display:none;
}
#terms_conditions{
    width:375px;
    padding:20px;
}
#starter{
    border: 2px #e8dcc8 inset; /* Antique white border */
}
.error{
    margin:20px;
    background-color: #ffc107;
    color: #212529;
    font-weight: bold;
}
thead td{
    text-align: left;
    font-weight: bold;
}
table{
    margin-bottom:20px;
}

td{
    border-left:1px solid #e8dcc8; /* Antique white border */
    border-bottom: 1px solid #e8dcc8; /* Antique white border */
}

ul li{
    word-break: break-word;
    font-size: small;
}
.new-ats-tag{

    background-color: #8b7355; /* Muted brown */
    color: #faf6f0; /* Antique white */

}
#jobsites{
    height:100px;
    width:400px;
    overflow: auto;
    border: 2px #e8dcc8 dotted; /* Antique white border */
}

#chat{
   
}

.hidden-question{
    display:none;
}

.highlight-question{
    display:inline;
}



.email-list {
    max-width: 100%;
    margin: 0 auto;
}

.email-header {
    display: block;
    /*grid-template-columns: 1fr 1fr 2fr 80px;*/
    gap: 15px;
    padding: 15px;
    background-color: #343a40;
    color: white;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
}

.email-row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.2s;
}

.email-row:hover {
    background-color: #f8f9fa;
}

.email-row:nth-child(even) {
    background-color: #f8f9fa;
}

.email-row:nth-child(even):hover {
    background-color: #f0ebe3; /* Even darker antique white */
}

.email-row-main {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 80px;
    gap: 15px;
    padding: 15px;
    align-items: center;
}

.email-row-preview {
    width: 100%;
    padding: 0 15px 15px 15px;
}

.email-row-preview .preview-text {
    padding-left: 0;
    margin-left: 0;
}

.date-received {
    font-size: 0.9em;
    color: #7a6f5e; /* Muted brown text */
    display: flex;
    align-items: center;
    gap: 8px;
}

.sent-check {
    color: #7a6f5e; /* Muted brown-green */
    font-weight: bold;
    font-size: 1.1em;
}

.from-email {
    font-family: monospace;
    word-break: break-all;
}

.subject {
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    font-weight: 500;
}

.preview-text {
    font-size: 0.85em;
    color: #888;
    word-break: break-word;
    line-height: 1.3;
    font-style: italic;
}

.response-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.response-badge.has-responses {
    background-color: #7a6f5e;
    color: #faf6f0;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #7a6f5e; /* Muted brown text */
    font-style: italic;
}

/* Mobile responsive design */
@media (max-width: 768px) {
    .email-header {
        display: block;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
    
    .email-row-main {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px 10px;
    }
    
    .email-row {
        border-bottom: 2px solid #e8dcc8; /* Antique white border */
    }
    
    .email-row-preview {
        padding: 0 10px 15px 10px;
    }
    
    .email-header::before {
        content: "📧 Email List";
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 10px;
    }
    
    .date-received::before {
        content: "📅 Date: ";
        font-weight: bold;
        color: #5d4e37; /* Muted brown for antique white */
    }
    
    .from-email::before {
        content: "👤 From: ";
        font-weight: bold;
        color: #5d4e37; /* Muted brown for antique white */
    }
    
    .subject::before {
        content: "📝 Subject: ";
        font-weight: bold;
        color: #5d4e37; /* Muted brown for antique white */
    }
    
    .preview-text {
        font-size: 0.8em;
        margin-left: 0; /* No indent on mobile */
    }
    
    .response-badge::before {
        content: "💬 Responses: ";
        font-weight: bold;
        color: #5d4e37; /* Muted brown for antique white */
    }
    
    .response-badge {
        display: inline;
        background: none;
        color: inherit;
        padding: 0;
        border-radius: 0;
        font-size: inherit;
        font-weight: normal;
    }
}

@media (max-width: 480px) {
    .email-list {
        margin: 0 10px;
    }
    
    .email-header,
    .email-row {
        padding: 12px 8px;
    }
}

.email-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.email-header {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    display:block;
}

.email-field {
    margin-bottom: 15px;
    display: block;
}

.email-field-label {
    font-weight: bold;
    font-size: smaller;
    color: #495057;
    margin-bottom: 5px;
    display: inline;
}

.email-field-value {
    color: #212529;
    word-break: break-word;
    font-size: smaller;
    max-height: 200px;
    overflow-y: auto;
    display: inline;
}

.email-body {
    background-color: #faf6f0; /* Antique white */
    border: 1px solid #e8dcc8; /* Antique white border */
    border-radius: 8px;
    max-height: 600px;
    overflow-y: auto;
    padding: 20px;
    margin-bottom: 20px;
    white-space: pre-wrap;
    font-family: inherit;
    /* CSS isolation to prevent email styles from affecting the page */
    contain: layout style;
    isolation: isolate;
}

/* Email content isolation container - prevents inheritance of external styles */
.email-content-container {
    /* CSS containment for complete isolation */
    contain: layout style;
    isolation: isolate;
    
    /* Create clean container styling */
    position: relative;
    background-color: #ffffff;
    border: 2px solid #e8dcc8;
    border-radius: 6px;
    padding: 15px;
    margin: 10px 0;
    max-width: 100%;
    overflow: hidden;
    
    /* Set basic typography as starting point */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #333333;
}

/* Reset ALL inherited styles for email content - this is the key! */
.email-content-container * {
    /* Reset everything to browser defaults, ignoring parent styles */
    all: revert;
    
    /* Then apply only essential safety constraints */
    max-width: 100%;
    position: static;
    z-index: auto;
    
    /* Prevent layout breaking */
    box-sizing: border-box;
}

/* Apply minimal safe styling for basic elements */
.email-content-container p {
    margin: 1em 0;
}

.email-content-container h1, .email-content-container h2, 
.email-content-container h3, .email-content-container h4, 
.email-content-container h5, .email-content-container h6 {
    margin: 1.2em 0 0.6em 0;
    font-weight: bold;
}

.email-content-container h1 { font-size: 1.5em; }
.email-content-container h2 { font-size: 1.3em; }
.email-content-container h3 { font-size: 1.1em; }

.email-content-container strong, .email-content-container b {
    font-weight: bold;
}

.email-content-container em, .email-content-container i {
    font-style: italic;
}

.email-content-container a {
    color: #0066cc;
    text-decoration: underline;
}

.email-content-container a:hover {
    color: #004499;
}

.email-content-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 5px 0;
}

.email-content-container table {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
}

.email-content-container td, .email-content-container th {
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.email-content-container ul, .email-content-container ol {
    margin: 1em 0;
    padding-left: 2em;
}

.email-content-container li {
    margin: 0.3em 0;
}

/* Hide dangerous elements that sanitizer might have missed */
.email-content-container style,
.email-content-container script,
.email-content-container link {
    display: none;
}

.responses-section {
    background-color: #f5f1eb; /* Slightly darker antique white */
    border: 1px solid #e8dcc8; /* Antique white border */
    border-radius: 8px;
    padding: 20px;
}

.back-button {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #8b7355; /* Muted brown */
    color: #faf6f0; /* Antique white */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.back-button:hover {
    background-color: #6b5b3f; /* Darker muted brown */
    color: #faf6f0; /* Antique white */
    text-decoration: none;
}

/* Email right-side controls (journey dropdown + tag buttons) */
.email-right-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}


/* Email tag / folder controls */
.email-tag-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}

.tag-btn-wrapper {
    position: relative;
}

/* Black circular icon buttons */
.tag-icon-btn {
    background-color: #111;
    border: none;
    color: #fff;
    padding: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.tag-icon-btn:hover,
.tag-icon-btn:focus {
    background-color: #333;
    outline: none;
}

.tag-dropdown {
    display: none;
    position: fixed;  /* escapes overflow:hidden parents */
    z-index: 9999;
    min-width: 200px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 10px;
}

.tag-dropdown.open {
    display: block;
}

.tag-dropdown-title {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.tag-dropdown-divider {
    border-top: 1px solid #dee2e6;
    margin: 8px 0;
}

.tag-current-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 22px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #e9ecef;
    border-radius: 12px;
    padding: 2px 8px 2px 10px;
    font-size: 12px;
    color: #333;
}

.tag-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin: 0;
}

.tag-chip-remove:hover {
    color: #dc3545;
}

.tag-none {
    font-size: 12px;
    color: #6c757d;
    font-style: italic;
}

.tag-available-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag-option-btn {
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    color: #333;
    transition: background 0.12s;
}

.tag-option-btn:hover {
    background: #e9ecef;
}

.tag-option-btn.tag-option-active {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}

.tag-current-folder {
    font-size: 13px;
    color: #495057;
}

.tag-add-new {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.tag-new-input {
    flex: 1;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    color: #333;
}

.tag-new-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.tag-add-btn {
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.tag-add-btn:hover {
    background: #0056b3;
}

/* Journey controls styling */
.email-actions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 5px;
    gap: 20px;
}

.email-filters {
    margin-bottom: 20px;
}

.email-search-form {
    width: 100%;
}

.email-search-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    align-items: flex-end;
    justify-content: space-between;
}

/* Right-aligned group: search-on selector + text input + submit button */
.email-search-controls {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

/* Keep the folder selector compact enough to avoid wrapping (e.g. "Sent Messages"). */
.email-filters .email-search-row > .email-search-field:first-child {
    flex: 0 0 auto;
}

.email-search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.email-search-field.email-search-submit {
    gap: 6px;
    justify-content: flex-start;
    height: auto;
    min-height: auto;
}

.email-search-field.email-search-submit button[type="submit"] {
    margin: 0;
}

.email-search-field label {
    font-weight: bold;
    color: #5d4e37;
    font-size: 0.95em;
}

.email-search-label-spacer {
    visibility: hidden;
    display: block;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    width: 0;
    overflow: hidden;
}

.email-search-field select,
.email-search-field input[type="text"] {
    padding: 8px 12px;
    border: 1px solid #e8dcc8;
    border-radius: 4px;
    background-color: #faf6f0;
    color: #5d4e37;
    font-size: 14px;
}

/* The search text input opts out of kendoTextBox so it stays a plain <input>.
   Match the rendered height of kendoDropDownList (which uses ~30px inner + borders). */
.email-search-text-input {
    height: 30px;
    padding: 4px 8px;
    border: 1px solid #e8dcc8;
    border-radius: 4px;
    background-color: #faf6f0;
    color: #5d4e37;
    font-size: 14px;
    box-sizing: border-box;
    vertical-align: middle;
    min-width: 180px;
}

.email-search-text-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Icon-only search button — match height of the native text input beside it */
.email-search-submit button[type="submit"].search-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Give the underlying <select> enough width; Kendo uses it when sizing the widget. */
.email-filters #folder {
    min-width: 156px;
    width: auto;
    white-space: nowrap;
}

/* Fallback: target the folder field's Kendo wrapper directly (first field in the filter row). */
.email-filters .email-search-row > .email-search-field:first-child .k-dropdown-wrap {
    width: max-content !important;
    min-width: 156px !important;
}

/* Kendo dropdown wrapper is inserted as a sibling of the original <select> within the same field. */
.email-filters #folder ~ span.k-dropdown-wrap,
.email-filters #folder ~ .k-dropdown-wrap {
    width: max-content !important;
    min-width: 156px;
    white-space: nowrap;
    display: inline-block;
}

.email-filters #folder ~ span.k-dropdown-wrap .k-input,
.email-filters #folder ~ .k-dropdown-wrap .k-input {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prevent Kendo dropdown options from wrapping into multiple lines. */
.k-list .k-item .k-link {
    white-space: nowrap !important;
}

/* Also handle cases where Kendo renders option text without `.k-link`. */
.k-list .k-item {
    white-space: nowrap !important;
    word-break: normal !important;
}

.k-list .k-item * {
    white-space: nowrap !important;
    word-break: normal !important;
}

.email-filters .k-dropdown-wrap {
    white-space: nowrap !important;
    width: 156px !important;
    min-width: 156px !important;
}

/* Kendo DropDownList uses one of these elements to render the selected text. */
.email-filters .k-dropdown-wrap .k-input,
.email-filters .k-dropdown-wrap .k-input-inner,
.email-filters .k-input-inner {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Fallback: if Kendo uses a different element for the selected value. */
.email-filters .k-dropdown-wrap * {
    white-space: nowrap !important;
    word-break: normal !important;
}

.email-search-field.email-search-input input {
    width: 320px;
    max-width: 100%;
}

.email-bottom-controls {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}

.email-range-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.email-range-form label {
    font-weight: bold;
    color: #5d4e37;
    font-size: 0.95em;
}

.email-range-form select {
    padding: 8px 12px;
    border: 1px solid #e8dcc8;
    border-radius: 4px;
    background-color: #faf6f0;
    color: #5d4e37;
    font-size: 14px;
}

.email-range-form select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.journey-controls {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
    width: var(--journey-select-width);
    max-width: var(--journey-select-width);
    overflow: hidden;
}

/* Fixed-width Kendo wrapper for journey select — prevents autosize resizing */
.journey-controls .k-dropdown,
.journey-controls .k-dropdownlist,
.journey-controls .k-picker {
    width: var(--journey-select-width) !important;
    min-width: var(--journey-select-width) !important;
    margin: 0 !important;
    vertical-align: middle;
}

/* Kill any theme margin/padding on the inner Kendo wrapper */
.journey-controls .k-dropdown-wrap,
.journey-controls .k-picker-wrap,
.journey-controls span.k-widget {
    margin: 0 !important;
}

.journey-select {
    width: var(--journey-select-width);
    min-width: var(--journey-select-width);
}

/* Correct conversation journey controls row */
.correction-journey-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

/* Mobile responsive design for journey controls */
@media (max-width: 768px) {
    .email-actions-header {
        flex-direction: column;
        align-items: stretch;
    }

    .email-right-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .journey-controls .k-dropdown,
    .journey-controls .k-dropdownlist {
        width: 100% !important;
        min-width: unset !important;
    }

    .journey-select {
        width: 100%;
        min-width: unset;
    }
}

.response-item {
    background-color: #faf6f0; /* Antique white */
    border: 1px solid #e8dcc8; /* Antique white border */
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
}

.response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.response-info {
    flex: 1;
}

.toggle-button {
    background-color: #8b7355; /* Muted brown */
    color: #faf6f0; /* Antique white */
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.toggle-button:hover {
    background-color: #6b5b3f; /* Darker muted brown */
}

.toggle-button.hidden {
    background-color: #7a6f5e; /* Muted brown-green */
}

.toggle-button.hidden:hover {
    background-color: #5d4e37; /* Darker muted brown-green */
    color: #faf6f0; /* Antique white for legibility */
}

.response-editor {
    display: none;
    margin-top: 15px;
    padding: 15px;
    background-color: #f5f1eb; /* Slightly darker antique white */
    border: 1px solid #e8dcc8; /* Antique white border */
    border-radius: 5px;
}

.response-editor-new {
    display: block;
}

.response-editor.show {
    display: block;
}

.editor {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-family: inherit;
    resize: vertical;
}

.send-button {
    background-color: #7a6f5e; /* Muted brown-green */
    color: #faf6f0; /* Antique white */
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 10px;
    transition: background-color 0.2s;
}

.send-button:hover {
    background-color: #5d4e37; /* Darker muted brown-green */
    color: #faf6f0; /* Antique white for legibility */
}

.no-responses {
    color: #7a6f5e; /* Muted brown text */
    font-style: italic;
    text-align: center;
    padding: 20px;
}

@media (max-width: 768px) {
    .email-detail {
        padding: 15px;
    }
    
    .email-header,
    .email-body,
    .responses-section {
        padding: 15px;
    }
    
    .response-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .toggle-button {
        align-self: flex-end;
    }
}

/* Timezone field styling */
.timezone {
    margin: 20px 0;
    padding: 15px;
    background-color: #f5f1eb; /* Slightly darker antique white */
    border: 1px solid #e8dcc8; /* Antique white border */
    border-radius: 5px;
}

.timezone label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #5d4e37; /* Muted brown for antique white */
}

.timezone p {
    margin: 8px 0 15px 0;
    color: #7a6f5e; /* Muted brown text */
    font-size: 0.9em;
    line-height: 1.4;
}

.timezone input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.timezone input:focus {
    outline: none;
    border-color: #8b7355; /* Muted brown */
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.25);
}

/* Kendo AutoComplete customization */
/* .k-autocomplete {
    width: 100% !important;
}

.k-autocomplete .k-input {
    padding: 10px !important;
    font-size: 14px !important;
}

.k-autocomplete .k-dropdown-wrap {
    border-radius: 4px !important;
}

.k-autocomplete .k-dropdown-wrap:focus-within {
    border-color: #8b7355 !important; 
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.25) !important;
} */

.page-size-selector {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f5f1eb; /* Slightly darker antique white */
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-size-selector label {
    font-weight: bold;
    margin-right: 5px;
}

.page-size-selector select {
    padding: 5px 10px;
    border: 1px solid #e8dcc8; /* Antique white border */
    border-radius: 4px;
    background-color: #faf6f0; /* Antique white */
}

.page-size-selector span {
    color: #7a6f5e; /* Muted brown text */
}

.pagination {
    margin-top: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.page-link {
    padding: 8px 12px;
    text-decoration: none;
    color: #8b7355; /* Muted brown */
    border: 1px solid #8b7355;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.page-link:hover {
    background-color: #8b7355; /* Muted brown */
    color: #faf6f0; /* Antique white */
    text-decoration: none;
}

.current-page {
    padding: 8px 12px;
    background-color: #8b7355; /* Muted brown */
    color: #faf6f0; /* Antique white */
    border-radius: 4px;
    font-weight: bold;
}

.pro-tip-content{
  width: 250px;
  font-size: small;
  align-content: center;
  align-items: center;
  word-break: break-word;
  margin: auto;
  border: 1px solid #e8dcc8; /* Antique white border */
  padding: 10px;
  background-color: #f5f1eb; /* Slightly darker antique white */
}

/* Django Messages Styling */
.messages-container {
    margin: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.message {
    position: relative;
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 4px solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideIn 0.3s ease-out;
}

.message-text {
    flex-grow: 1;
    margin-right: 10px;
}

.message-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.message-close:hover {
    opacity: 1;
    background-color: rgba(139, 115, 85, 0.1); /* Muted brown with transparency */
}

/* Message type variations */
.message-success {
    background-color: #e8f5e8; /* Light muted green */
    border-color: #7a6f5e; /* Muted brown-green */
    color: #5d4e37; /* Muted brown */
}

.message-error,
.message-danger {
    background-color: #f8e8e8; /* Light muted red */
    border-color: #8b7355; /* Muted brown */
    color: #5d4e37; /* Muted brown */
}

.message-warning {
    background-color: #f8f4e8; /* Light muted yellow */
    border-color: #9a8b7a; /* Light muted brown */
    color: #5d4e37; /* Muted brown */
}

.message-info {
    background-color: #e8f0f5; /* Light muted blue */
    border-color: #7a6f5e; /* Muted brown-green */
    color: #5d4e37; /* Muted brown */
}

/* Default message styling (when no tags) */
.message:not([class*="message-"]) {
    background-color: #f0ebe3; /* Even darker antique white */
    border-color: #8b7355; /* Muted brown */
    color: #5d4e37; /* Muted brown */
}

/* Animation for message appearance */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Ultra-high specificity override for navigation positioning - must come after all other rules */
html body div#menu.topnav.new-nav {
    position: absolute !important;
    top: 247px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 830px !important;
    height: 60px !important;
    background: #5d4e37 !important;
    color: #faf6f0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    flex-wrap: nowrap !important;
}

/* Ensure hamburger menu positioning */
html body div#menu.topnav.new-nav .hamburger-menu {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    transform: none !important;
    margin-left: 20px !important;
    display: inline-block !important;
    background-color: #faf6f0 !important;
}

/* Ensure navigation links have proper text color */
html body div#menu.topnav.new-nav a {
    color: #faf6f0 !important;
}

/* Ensure hamburger content links have proper text color */
html body div#menu.topnav.new-nav .hamburger-content a {
    color: #faf6f0 !important;
}

/* Ensure logout button positioning */
html body div#menu.topnav.new-nav .logout-btn {
    margin-right: 20px !important;
}

/* Ensure login button positioning for non-logged-in users */
html body div#menu.topnav.new-nav .login:not(.logout-btn) {
    margin-right: 20px !important;
}

/* Navigation link styles */
html body div#menu.topnav.new-nav a {
    background: none !important;
    border: none !important;
    color: #faf6f0 !important;
    text-align: center !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    transition: background-color 0.3s !important;
    white-space: nowrap !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    float: none !important;
}

/* Shimmer effect for navigation links */
html body div#menu.topnav.new-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

html body div#menu.topnav.new-nav a:hover::before {
    animation: shimmer 0.6s ease;
}

html body div#menu.topnav.new-nav a:hover {
    background-color: #8b7355 !important;
    color: #faf6f0 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Shimmer animation keyframes */
@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* /* .topnav.new-nav .hamburger-content a {
    color: #333 !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    display: block !important;
    border-bottom: 1px solid #f1f1f1 !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: hidden !important;
} 

.topnav.new-nav .hamburger-content a::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    transition: left 0.6s ease !important;
    z-index: 1 !important;
}

.topnav.new-nav .hamburger-content a:hover::before {
    animation: shimmer 0.6s ease !important;
}

.topnav.new-nav .hamburger-content a:hover {
    background-color: #f1f1f1 !important;
    color: #333 !important;
}

.topnav.new-nav .hamburger-content a:last-child {
    border-bottom: none !important;
} */

.nav-left {
    display: flex;
    align-items: center;
    margin-left: 20px !important;
}

.start-conversation-btn {
    border: 2px solid #faf6f0 !important;
    color: #faf6f0 !important;
    
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
    position: relative;
    overflow: hidden;
}

.start-conversation-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.start-conversation-btn:hover::before {
    animation: shimmer 0.6s ease;
}

.start-conversation-btn:hover {
    background-color: #6e5c45 !important;
    color: #faf6f0 !important;
}

.logout-btn {
    background-color: #8b2020 !important;
    color: #faf6f0 !important;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
    position: relative;
    overflow: hidden;
}

.logout-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.logout-btn:hover::before {
    animation: shimmer 0.6s ease;
}

.logout-btn:hover {
    background-color: #6b1212 !important;
    color: #faf6f0 !important;
}

.new-nav a.login {
    color: #faf6f0 !important;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.3s;
    background: none !important;
    border: none !important;
}

.new-nav a.login:hover {
    background-color: #8b7355 !important;
    color: #faf6f0 !important;
}

/* Banner overrides for new navigation */
.new-nav + #banner,
#banner + .new-nav {
    position: relative !important;
    /*top: auto !important;*/
    top: 247px !important;
    height: 60px !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
}

.new-nav + #banner img,
#banner + .new-nav img {
    max-height: 40px !important;
    width: auto !important;
}

/* Responsive design for messages */
@media (max-width: 768px) {
    .messages-container {
        margin: 10px;
    }
    
    .message {
        padding: 12px 15px;
        margin-bottom: 8px;
    }
    
    .message-close {
        font-size: 18px;
        width: 20px;
        height: 20px;
    }
}

/* Responsive design for new navigation */
@media (max-width: 768px) {
    .new-nav {
        width: 95% !important;
        max-width: 800px !important;
        flex-direction: column !important;
        padding: 15px !important;
        gap: 10px !important;
        height: auto !important;
    }
    
    /* .topnav.new-nav .hamburger-content {
        position: static !important;
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
        margin-top: 10px !important;
    } */
    
    .nav-left {
        order: -1;
        margin-bottom: 10px;
    }
}

/* Responsive design for navigation */
@media (max-width: 768px) {
    #banner {
        width: 95%;
        max-width: 800px;
        padding: 15px;
    }
    
    .topnav {
        width: 95%;
        max-width: 800px;
        flex-wrap: wrap;
        padding: 15px;
        justify-content: center;
        gap: 8px;
        height: auto; /* Allow height to adjust on mobile */
    }
    
    .topnav a {
        padding: 10px 12px;
        font-size: 14px;
        margin: 2px;
        flex: 0 0 auto;
    }
    
    .topnav a.login {
        order: -1; /* Put login/logout at the top on mobile */
        width: 100%;
        margin-bottom: 10px;
    }
    
    #banner img {
        width: 100%;
        max-width: 500px;
    }
    
    #content {
        width: 95%;
        max-width: 800px;
        top: auto;
        position: relative;
        margin-top: 20px;
    }
}

/* Consolidated New Navigation Styles - Must override existing topnav styles */
html body div#menu.topnav.new-nav {
    background: #5d4e37 !important;
    position: absolute !important;
    top: 247px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 830px !important;
    height: 60px !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    color: #faf6f0 !important;
}

/* Ensure hamburger menu positioning */
html body div#menu.topnav.new-nav .hamburger-menu {
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    transform: none !important;
    margin-left: 20px !important;
    display: inline-block !important;
    background-color: #faf6f0 !important;
}

/* Ensure hamburger content positioning */
html body div#menu.topnav.new-nav .hamburger-content {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    transform: none !important;
}

/* Hamburger button styles */
html body div#menu.topnav.new-nav .hamburger-btn {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 4px !important;
    transition: background-color 0.3s !important;
}

html body div#menu.topnav.new-nav .hamburger-btn:hover {
    background-color: #8b7355 !important;
}

/* Hamburger content styles */
html body div#menu.topnav.new-nav .hamburger-content {
    display: none !important;
    position: absolute !important;
    background-color: white !important;
    min-width: 200px !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
    z-index: 1000 !important;
    border-radius: 4px !important;
    top: 100% !important;
    left: 0 !important;
}

/* Ensure logout button positioning */
html body div#menu.topnav.new-nav .logout-btn {
    margin-right: 20px !important;
}

/* Ensure login button positioning for non-logged-in users */
html body div#menu.topnav.new-nav .login:not(.logout-btn) {
    margin-right: 20px !important;
}

/* Completely new navigation styles with unique class name to avoid conflicts */
.navigation-fixed {
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #5d4e37 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    flex-wrap: nowrap !important;
}

/* Navigation link styles */
.navigation-fixed a {
    background: none !important;
    border: none !important;
    color: #faf6f0 !important;
    text-align: center !important;
    padding: 8px 16px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    transition: background-color 0.3s !important;
    white-space: nowrap !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    float: none !important;
}

/* Shimmer effect for navigation links */
.navigation-fixed a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.navigation-fixed a:hover::before {
    animation: shimmer 0.6s ease;
}

.navigation-fixed a:hover {
    background-color: #8b7355 !important;
    color: #faf6f0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.4) !important;
}

/* Hamburger menu styles */
.navigation-fixed .hamburger-menu {
    margin-left: 20px !important;
    position: relative !important;
    display: inline-block !important;
}

.navigation-fixed .hamburger-btn {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 8px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    color: #faf6f0 !important;
    font-weight: bold !important;
    text-shadow: 0 0 2px rgba(0,0,0,0.5) !important;
}

.hamburger-icon{
    color: #faf6f0 !important
}

.hamburger-icon:hover{
    color: #5d4e37 !important;
}

.navigation-fixed .hamburger-btn:hover {
    background-color: #faf6f0 !important;
    color: #5d4e37 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    transform: translateY(-1px) !important;
}

/* Kendo popup menu styles - with high specificity to override Kendo defaults */
/* Button positioning */
.navigation-fixed .logout-btn {
    margin-right: 20px !important;
    background-color: #7a6f5e !important;
    border: 2px solid #faf6f0 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.navigation-fixed .logout-btn:hover {
    background-color: #5d4e37 !important;
    border-color: #8b7355 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(139, 115, 85, 0.5) !important;
}

.navigation-fixed .nav-left {
    margin-left: 20px !important;
}

.navigation-fixed .start-conversation-btn {
    border: 2px solid #faf6f0 !important;
    color: #faf6f0 !important;
    background-color: #7a6f5e !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background-color 0.3s !important;
}



.navigation-fixed .login:not(.logout-btn) {
    margin-right: 20px !important;
    background-color: #7a6f5e !important;
    border: 2px solid #faf6f0 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.navigation-fixed .login:not(.logout-btn):hover {
    background-color: #5d4e37 !important;
    border-color: #8b7355 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(139, 115, 85, 0.5) !important;
}


#menu{
    position: relative;
    z-index: 100;
}
#navMenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 100;
  }


  #navMenu li{
    display: inline-block;
    list-style-type: none;
    position: relative;
    z-index: 100;
  }
  #navMenu li a{
    display: block;
    padding: 10px 20px;
    text-decoration: none;

  }
  #navMenu li a:hover{
  
  }

  .k-menu-expand-arrow{
    display: none !important;
  }
.k-menu-item{
    background-color: #5d4e37 !important;
}

.k-menu-item:hover a{
    background-color: #faf6f0 !important;
}

.k-menu-link{
    color: #faf6f0 !important;
}

.k-menu-link:hover{
    color: #5d4e37 !important;
}

.k-menu-link:hover a{
    color: #5d4e37 !important;
}

.btn-primary{
    background-color: #8b7355 !important;
    border-color: #8b7355 !important;
    color: #faf6f0 !important;
}

.btn-primary:hover{
    background-color: #5d4e37 !important;
    border-color: #5d4e37 !important;
    color: #faf6f0 !important;
}

/* ── Kendo Menu — palette overrides (ocean-blue theme loads first) ─────────
 *
 * Kendo processes #navMenu into a .k-menu widget and applies the ocean-blue
 * theme. All overrides here need enough specificity to beat that theme.
 * The nav outer div uses .navigation-fixed (dark bark background).
 */

/* Make the Kendo menu widget root transparent so the nav bg shows through */
.navigation-fixed .k-menu,
.navigation-fixed ul.k-widget {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Top-level menu items: dark bark bg, antique white text */
.navigation-fixed .k-menu-item,
.navigation-fixed .k-item {
    background-color: transparent !important;
    border: none !important;
}

.navigation-fixed .k-menu-link,
.navigation-fixed .k-link,
.navigation-fixed .k-menu > .k-item > .k-link {
    color: #faf6f0 !important;
    background-color: transparent !important;
}

.navigation-fixed .k-menu-item:hover > .k-link,
.navigation-fixed .k-item:hover > .k-link,
.navigation-fixed .k-menu-item.k-hover > .k-link {
    background-color: #8b7355 !important;
    color: #faf6f0 !important;
}

/* Popup dropdown (sub-menu/group) — lighter bg, dark readable text */
.navigation-fixed .k-menu-popup,
.navigation-fixed .k-popup,
.navigation-fixed .k-menu-group,
.navigation-fixed .k-group {
    background-color: #faf6f0 !important;
    border: 1px solid #e8dcc8 !important;
    box-shadow: 0 4px 12px rgba(93, 78, 55, 0.15) !important;
}

.navigation-fixed .k-menu-group .k-item,
.navigation-fixed .k-menu-group .k-menu-item {
    background-color: #faf6f0 !important;
}

.navigation-fixed .k-menu-group .k-link,
.navigation-fixed .k-menu-group .k-menu-link,
.navigation-fixed .k-group a {
    color: #5d4e37 !important;
    background-color: transparent !important;
}

.navigation-fixed .k-menu-group .k-item:hover .k-link,
.navigation-fixed .k-menu-group .k-menu-item:hover .k-menu-link,
.navigation-fixed .k-menu-group .k-item.k-hover .k-link {
    background-color: #e8dcc8 !important;
    color: #5d4e37 !important;
}

/* ── Kendo Button — override ocean-blue secondary theme ──────────────────
 *
 * base.html applies kendoButton({themeColor:'secondary'}) to ALL buttons.
 * Kendo wraps button text in <span class="k-button-text">.
 * The global "span { color: #5d4e37 }" rule targets that span directly,
 * beating any inherited colour from the button parent.
 * Fix: force .k-button-text to inherit the button's colour.
 */

/* Make Kendo's inner text span inherit the button's colour in all cases */
.k-button .k-button-text {
    color: inherit !important;
}

/* Generic reset — let the button's own class drive the colour */
.k-button.k-button-solid-secondary,
.k-button.k-button-solid-base {
    background-color: #8b7355 !important;
    border-color: #8b7355 !important;
    color: #faf6f0 !important;
}

.k-button.k-button-solid-secondary:hover,
.k-button.k-button-solid-base:hover {
    background-color: #6e5c45 !important;
    border-color: #6e5c45 !important;
    color: #faf6f0 !important;
}

/* Per-class overrides for page-specific buttons */
button.create-btn.k-button,
button.create-btn {
    background-color: #5d4e37 !important;
    color: #faf6f0 !important;
    border-color: #5d4e37 !important;
}

button.create-btn.k-button:hover,
button.create-btn:hover {
    background-color: #3e3527 !important;
    color: #faf6f0 !important;
}

button.revoke-btn.k-button,
button.revoke-btn {
    background-color: #8b2020 !important;
    color: #faf6f0 !important;
    border-color: #8b2020 !important;
}

button.revoke-all-btn.k-button,
button.revoke-all-btn {
    background-color: #6b1212 !important;
    color: #faf6f0 !important;
    border-color: #6b1212 !important;
}

/* btn-* classes used across tools / email_aliases */
button.btn-verify.k-button,
button.btn-verify {
    background-color: #4a7c59 !important;
    color: #faf6f0 !important;
    border-color: #4a7c59 !important;
}

button.btn-toggle.k-button,
button.btn-toggle {
    background-color: #8b7355 !important;
    color: #faf6f0 !important;
    border-color: #8b7355 !important;
}

button.btn-delete.k-button,
button.btn-delete {
    background-color: #8b2020 !important;
    color: #faf6f0 !important;
    border-color: #8b2020 !important;
}

/* Disabled state */
.k-button[disabled],
.k-button.k-disabled {
    background-color: #c4a882 !important;
    border-color: #c4a882 !important;
    color: #faf6f0 !important;
    opacity: 0.7 !important;
}

/* ── Email attachment badge (paperclip icon in email list) ──────────────── */
.attachment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: #5d4e37;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 6px;
    color: #fff;
    flex-shrink: 0;
}

/* ── Compose email form ─────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 20px;
}

.compose-readonly-field {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

.compose-doc-select-wrapper {
    display: inline-block;
    min-width: 280px;
    max-width: 100%;
}

.compose-coverletter-row,
.compose-attach-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.compose-coverletter-row label,
.compose-attach-row label {
    white-space: nowrap;
    font-weight: 500;
    color: #495057;
}

.compose-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* ── Response form: attach document row ────────────────────────────────── */
.attach-document-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.attach-label {
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
    font-size: 0.9em;
}

.attach-select-wrapper {
    min-width: 240px;
    max-width: 100%;
}

.attach-select-wrapper select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9em;
    background-color: #fff;
    color: #333;
}

.attach-select-wrapper select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Select inside compose form */
.compose-doc-select-wrapper select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9em;
    background-color: #fff;
    color: #333;
}

.compose-doc-select-wrapper select:focus {
    border-color: #8b7355;
    box-shadow: 0 0 0 2px rgba(139, 115, 85, 0.25);
    outline: none;
}

/* ── Nav left group: hamburger + icon bar pinned together ────────────────── */

.nav-left-group {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

/* ── Nav icon bar ────────────────────────────────────────────────────────── */

.nav-icon-bar {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding-left: 4px !important;
}

.nav-icon-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 6px 12px !important;
    color: #faf6f0 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;  /* override .navigation-fixed a overflow:hidden */
}

/* Suppress the shimmer pseudo-element that bleeds across the icon buttons */
.nav-icon-btn::before {
    display: none !important;
}

.nav-icon-btn svg {
    display: block !important;
    flex-shrink: 0 !important;
}

.nav-icon-btn span {
    color: #faf6f0 !important;
    display: block !important;
}

.nav-icon-btn:hover {
    background-color: #8b7355 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.4) !important;
    color: #faf6f0 !important;
}

.nav-icon-btn:hover span {
    color: #faf6f0 !important;
}

/* Active state — highlights the current section */
.nav-icon-btn.active {
    background-color: #7a6f5e !important;
}

/* ── Hamburger menu section headers ─────────────────────────────────────── */

.navigation-fixed .k-menu-group .menu-section-header,
.navigation-fixed .k-group .menu-section-header {
    padding: 10px 16px 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #8b7355 !important;
    cursor: default !important;
    border-top: 1px solid #e8dcc8 !important;
    margin-top: 4px !important;
    pointer-events: none !important;
    background: none !important;
}

.navigation-fixed .k-menu-group .menu-section-header:first-child,
.navigation-fixed .k-group .menu-section-header:first-child {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 6px !important;
}

/* Logout item at bottom of hamburger */
.navigation-fixed .k-menu-group .menu-logout,
.navigation-fixed .k-group .menu-logout {
    border-top: 1px solid #e8dcc8 !important;
    margin-top: 4px !important;
}

.navigation-fixed .k-menu-group .menu-logout a,
.navigation-fixed .k-group .menu-logout a {
    color: #7a6f5e !important;
    font-style: italic !important;
}