@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Outfit:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,400;0,600;1,400&family=Spectral:ital,wght@0,400;0,600;1,400&family=Plus+Jakarta+Sans:wght@400;500;600&family=Inter:wght@400;500;600&family=Roboto:wght@300;400;500;700&family=Unbounded:wght@300;400;500;600;700&display=swap');

:root {
    /* Default theme */
    --primary: #094f6d;
    --secondary: #4d9a0f;
    --text: #333;
    --text-contrast: #fff;
    --text-light: #666;
    --background: #f5f5f5;
    --card-background: #fff;
    --shadow: rgba(0, 0, 0, 0.1);
    --highlight: #aee31e;
    --success: #269f0e;
    --success-bg: #E3FCF7;
    --warning: #D97706;
    --warning-bg: #FEF3C7;
    --error: #ffffff;
    --error-bg: rgba(158, 15, 0, 0.5);
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-accent: 'Outfit', sans-serif;
    --menu-background:rgba(13, 54, 85, 0.75);
    --odd-row:#e8f1fb;
    --even-row:#d8e9fa;
    --light-back:#E7F2FA;
}
[data-theme="dark"] {
    --primary: #111;
    --secondary: #2a4371;
    --text: #bdbdbd;
    --text-contrast: #e5e7eb;
    --text-light: #fff;
    --background: #1f1f1f;
    --card-background: #171717;
    --shadow: rgba(76, 175, 80, 0.1);
    --highlight: #A7A7A7;
    --success: #1A9A20;
    --success-bg: #101010;
    --warning: #FFA726;
    --warning-bg: #0A0A0A;
    --error: #000;
    --error-bg: rgba(158, 15, 0, 0.5);
    --menu-background: rgba(27, 27, 27, 0.85);
    --odd-row: #000;
    --even-row: #1d1d1d;
    --light-back: #222;
}

[data-theme="forest"] {
    --primary: #4CAF50;
    --secondary: #8BC34A;
    --text: #1c1c1c;
    --text-contrast: #e5e7eb;
    --text-light: #424242;
    --background: #f4f9f4;
    --card-background: #ffffff;
    --shadow: rgba(76, 175, 80, 0.1);
    --highlight: #A5D6A7;
    --success: #66BB6A;
    --success-bg: #E8F5E9;
    --warning: #FFA726;
    --warning-bg: #FFF3E0;
    --error: #e6e6e6;
    --error-bg: rgba(158, 15, 0, 0.5);
    --menu-background: rgb(19 138 24 / 85%);
    --odd-row: #E8F5E9;
    --even-row: #C8E6C9;
    --light-back: #ebffde;
}

[data-theme="ocean"] {
    --primary: #040c13;
  --secondary: #2a4371;
  --text: #bdbdbd;
  --text-contrast: #e5e7eb;
  --text-light: #fff;
  --background: #06222b;
  --card-background: #08151a;
  --shadow: rgba(76, 175, 80, 0.1);
  --highlight: #A7A7A7;
  --success: #1A9A20;
  --success-bg: #101010;
  --warning: #FFA726;
  --warning-bg: #0D1F2F;
  --error: #000;
  --error-bg: rgba(158, 15, 0, 0.5);
  --menu-background: rgba(5, 42, 57, 0.7);
  --odd-row: #000;
  --even-row: #0f3240;
  --light-back: #0b2935;
}

[data-theme="sunset"] {
    --primary: #FF9800;
    --secondary: #F44336;
    --text: #1c1c1c;
    --text-contrast: #e5e7eb;
    --text-light: #424242;
    --background: #f8f1ed;
    --card-background: #ffffff;
    --shadow: rgba(255, 152, 0, 0.1);
    --highlight: #FFB74D;
    --success: #FF7043;
    --success-bg: #FBE9E7;
    --warning: #FF5722;
    --warning-bg: #FBE9E7;
    --error: #ffffff;
    --error-bg: rgba(158, 15, 0, 0.5);
    --menu-background: rgba(255, 152, 0, 0.85);
    --odd-row: #FFF3E0;
    --even-row: #FFE0B2;
    --light-back: #fff2e3;
}



.theme-selector {
    position: fixed;
    top: 94vh;
    right: 20px;
    z-index: 3000;
    background: var(--card-background);
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0 2px 10px var(--shadow);
    transition: all 0.3s ease;
}

.theme-circles {
    display: flex;
    gap: 8px;
}

.theme-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--card-background);
    padding: 2px;
    cursor: pointer;
    background: transparent;
    position: relative;
    transition: all 0.3s ease;
}

.theme-circle:hover {
    transform: scale(1.1);
}

.theme-circle:active {
    transform: scale(0.95);
}

.circle-inner {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Theme-specific colors */
.theme-circle[data-theme="default"] .circle-inner {
    background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
}

.theme-circle[data-theme="dark"] .circle-inner {
    background: linear-gradient(135deg, #2D2D2D, #404040);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-circle[data-theme="forest"] .circle-inner {
    background: linear-gradient(135deg, #4CAF50, #8BC34A);
}

.theme-circle[data-theme="ocean"] .circle-inner {
    background: linear-gradient(135deg, #03A9F4, #00BCD4);
}

.theme-circle[data-theme="sunset"] .circle-inner {
    background: linear-gradient(135deg, #FF9800, #F44336);
}

/* Active theme indicator */
.theme-circle.active {
    border-color: var(--primary);
    transform: scale(1.1);
}

.theme-circle.active .circle-inner {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Dark theme adjustments */
[data-theme="dark"] .theme-selector {
    background: rgba(45, 45, 45, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .nav {
    background: rgba(45, 45, 45, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}


html {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    position: relative;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;

    -webkit-overflow-scrolling: touch;
    line-height: 1.6;
    background: var(--background);
    color: var(--text);

    font-family: var(--font-body);
    font-weight: 400;
}

.global-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999; /* Extremely high z-index */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.global-loader.active {
    visibility: visible;
    opacity: 1;
}

.global-loader-spinner {
    width: 150px;
    height: 150px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--highlight);
    animation: spin 1s ease-in-out infinite;
    background: var(--menu-background);

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Semi-transparent overlay to prevent interaction while loading */
/*.global-loader::before {*/
/*    content: '';*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100vw;*/
/*    height: 100vh;*/
/*    !*background: rgba(0, 0, 0, 0.2);*!*/
/*    backdrop-filter: blur(2px);*/
/*    -webkit-backdrop-filter: blur(2px);*/
/*    opacity: 0;*/
/*    transition: opacity 0.3s ease-in-out;*/
/*    pointer-events: none;*/
/*}*/

.global-loader.active::before {
    /*opacity: 1;*/
    pointer-events: all;
}
















.vault-loader {
    width: 180px;
    height: 180px;
    position: relative;
    perspective: 1000px;
}

.vault-door {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: vault-spin 2s infinite linear;
    border: 5px solid var(--menu-background);
    border-radius: 50%;
}

.vault-door::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 14px solid var(--menu-background);
    border-radius: 50%;
    transform: rotateY(60deg);
}

.vault-door::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 14px solid var(--menu-background);
    border-radius: 50%;
    transform: rotateY(-60deg);
}

.data-stream {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--menu-background);
    border-radius: 50%;
    animation: data-flow 1.5s infinite ease-out;
}

.data-stream:nth-child(2) { animation-delay: 0.2s; }
.data-stream:nth-child(3) { animation-delay: 0.4s; }
.data-stream:nth-child(4) { animation-delay: 0.6s; }

@keyframes vault-spin {
    0% { transform: rotateY(0deg) rotateX(0deg); }
    100% { transform: rotateY(360deg) rotateX(360deg); }
}

@keyframes data-flow {
    0% {
        transform: translate(-160px, -140px) scale(1);
        opacity: 0;
    }
    50% {
        transform: translate(0, 0) scale(1.5);
        opacity: 1;
    }
    100% {
        transform: translate(40px, 40px) scale(1);
        opacity: 0;
    }
}

.global-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    /*! visibility: hidden; */
    /*! opacity: 0; */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.global-loader.active {
    visibility: visible;
    opacity: 1;
}

.loader-progress {
    font-family: monospace;
    font-size: 24px;
    color: var(--menu-background);
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:var(--menu-background);
    backdrop-filter: blur(3px);
    z-index: 999998;
    visibility: hidden;
    opacity: 1;
    transition: all 0.3s ease;
}

.loader-overlay.active {
    visibility: visible;
    opacity: 1;
}





/* Add to your styles */
.shield-loader {
    width: 80px;
    height: 80px;
    position: relative;
    margin: 20px auto;
}

.shield-outline {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: path('M40 2 L75 15 L75 40 C75 65 40 78 40 78 C40 78 5 65 5 40 L5 15 Z');
    border: 3px solid var(--primary);
    animation: shield-pulse 2s infinite ease-in-out;
}

.shield-progress {
    position: absolute;
    width: 100%;
    height: 0%;
    bottom: 0;
    background: var(--primary);
    opacity: 0.3;
    clip-path: path('M40 2 L75 15 L75 40 C75 65 40 78 40 78 C40 78 5 65 5 40 L5 15 Z');
    transition: height 0.3s ease-in-out;
}

.shield-guardian {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primary);
    clip-path: path('M40 20 C45 20 55 25 55 35 C55 45 45 50 40 50 C35 50 25 45 25 35 C25 25 35 20 40 20');
    transform-origin: center 35px;
    animation: guardian-flex 1.5s infinite ease-in-out;
}

@keyframes shield-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes guardian-flex {
    0% { transform: scaleX(1); }
    50% { transform: scaleX(1.1); }
    100% { transform: scaleX(1); }
}

/* Update your existing loader classes */
.global-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.4);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.loader-progress {
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 600;
    color: var(--primary);
}

















h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    color: var(--text);

}
p {
    font-size: initial;
    font-family: var(--font-body);
    font-weight: initial;
    color: var(--text);
}
a {
    color: var(--text);
}
.logo{
    height: 80px;
}
.logo, .nav-links {
    font-family: var(--font-accent);
    font-weight: 500;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* Navigation */
nav {
    /*position: fixed;*/
    width: 100%;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px var(--shadow);
    z-index: 1001;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.container.has-background-white {
    /*margin-top: 110px;*/
    padding: 20px;
}


.container{
    margin: 0;
    display: inline-block;
    width: 100%;
    position: relative;
}
.component {
    padding: 20px;
}


/*Action Panel*/


.action-panel {
    background: var(--light-back);
    border: 1px dotted var(--warning);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin: 20px;
}

.action-content {
    max-width: 100%;
}

.action-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.action-description {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.action-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #004466;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
}

.action-button:hover {
    background-color: #003355;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.icon {
    display: inline-flex;
    align-items: center;
}



.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.action-info {
    padding-right: 2rem;
}

.video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: var(--background-dark);
    border-radius: 0.5rem;
    overflow: hidden;
}

.tutorial-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .action-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .action-info {
        padding-right: 0;
    }
}



/* Form Elements Base Styles */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text);
    background-color: var(--card-background);
    border: 1px solid rgba(9, 79, 109, 0.2);
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px var(--shadow);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(9, 79, 109, 0.1);


}

/* Select Styling */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23094f6d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    color: var(--text);
}

/* Checkbox Styling */
input[type="checkbox"] {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border:2px solid var(--secondary);
    border-radius: 4px;
    margin-right: 0.5rem;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text);
}

input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:hover {
    border-color: var(--secondary);
}

/* Button Styles */
button,
.button {
    padding: 0.75rem 1.5rem;
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 0.95rem;
    color: white;
    background-color: var(--primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px var(--shadow);
    color: var(--text);
}

button:hover,
.button:hover {
    background-color: var(--secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px var(--shadow);
}

button:active,
.button:active {
    transform: translateY(0);
}

/* Table Styles */

.sort-indicator {
    display: inline-block;
    margin-left: 4px;
    user-select: none;
}

th.sorting {
    background-color: var(--background-light);
}

.sortable th:not(.no-sort):hover {
    background-color: var(--background-hover);
}


table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0;
    background: var(--card-background);
    border-radius: 8px;

    display: inline-table;

    overflow: auto;
    box-shadow: 0 4px 6px var(--shadow);
    table-layout: fixed;
    color: var(--text);

}

th {
    background-color: var(--card-background);
    color: var(--highlight);
    font-family: var(--font-accent);
    font-weight: 600;
    text-align: left;
    padding: 1rem;
    border-bottom: 2px solid rgba(9, 79, 109, 0.1);
}

td {
    padding: 1rem;
    border-bottom: 1px solid rgba(9, 79, 109, 0.1);
    transition: background-color 0.2s ease;
    overflow: hidden;
    word-wrap: break-word;

}

tr:last-child td {
    border-bottom: none;
}

tr:hover td {
    background-color: rgba(9, 79, 109, 0.02);
}

/* Form Layout Utilities */
.form-group {
    margin-bottom: 0;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-accent);
    font-weight: 500;
    color: var(--text);
}

/* Status Indicators */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-success {
    background-color: var(--success-bg);
    color: var(--success);
}

.status-warning {
    background-color: var(--warning-bg);
    color: var(--warning);
}

.status-error {
    background-color: var(--error-bg);
    color: var(--error);
}

/* Time Input Specific Styling */
input[type="time"] {
    font-family: var(--font-body);
    padding: 0.5rem;
}

/* Disabled State Styling */
input:disabled,
select:disabled,
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: repeating-linear-gradient(
            45deg,
            var(--card-background),
            var(--card-background) 10px,
            var(--background) 10px,
            var(--background) 20px
    );
}

/* Focus Ring Animation */
@keyframes focus-ring {
    0% { box-shadow: 0 0 0 0 rgba(9, 79, 109, 0.4); }
    100% { box-shadow: 0 0 0 3px rgba(9, 79, 109, 0.1); }
}

/* Select All/Deselect All Button Styles */
.select-action {
    font-size: 0.875rem;
    color: var(--primary);
    background: none;
    border: 1px solid var(--primary);
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.select-action:hover {
    background-color: var(--primary);
    color: white;
}


/*MODAL SHIT*/


.modal-close {
    background:0 0;
    height:40px;
    position:fixed;
    right:20px;
    top:20px;
    width:40px
}
.modal-card {
    display:flex;
    flex-direction:column;
    height:calc(100vh - 40px);
    overflow:hidden;
    -ms-overflow-y:visible
}
.modal-card-foot,
.modal-card-head {
    align-items:center;
    background-color:#f5f5f5;
    display:flex;
    flex-shrink:0;
    justify-content:flex-start;
    padding:20px;
    position:relative
}
.modal-card-head {
    border-bottom:1px solid #dbdbdb;
    border-top-left-radius:6px;
    border-top-right-radius:6px
}
.modal-card-title {
    color:#363636;
    flex-grow:1;
    flex-shrink:0;
    font-size:1.5rem;
    line-height:1
}
.modal-card-foot {
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    border-top:1px solid #dbdbdb
}
.modal-card-foot .button:not(:last-child) {
    margin-right:.5em
}
.modal-card-body {
    -webkit-overflow-scrolling:touch;
    background-color:#fff;
    flex-grow:1;
    flex-shrink:1;
    overflow:auto;
    padding:20px
}


/* Base animation settings for all elements */
* {
    animation: smoothEntry 0.3s ease-out;
    animation-fill-mode: backwards;
}

/* Main entrance animation */
@keyframes smoothEntry {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger child elements within containers */
.nav-container > *,
.form-group > *,
table > * > * {
    animation: smoothEntry 0.3s ease-out;
    animation-fill-mode: backwards;
}

/* Stagger delays for specific elements */
nav a:nth-child(1) { animation-delay: 0.1s; }
nav a:nth-child(2) { animation-delay: 0.15s; }
nav a:nth-child(3) { animation-delay: 0.2s; }
nav a:nth-child(4) { animation-delay: 0.25s; }
nav a:nth-child(5) { animation-delay: 0.3s; }

/* Table rows fade in sequence */
tr:nth-child(1) { animation-delay: 0.1s; }
tr:nth-child(2) { animation-delay: 0.15s; }
tr:nth-child(3) { animation-delay: 0.2s; }
tr:nth-child(4) { animation-delay: 0.25s; }
tr:nth-child(5) { animation-delay: 0.3s; }


table tbody tr:nth-child(even) {
    background-color:var(--even-row);
}

table tbody tr:nth-child(odd) {
    background-color: var(--odd-row);
}

table tbody tr:hover {
    background-color: rgba(0, 68, 102, 0.08);
    transition: background-color 0.2s ease;
}
/* Form elements smooth entry */
input,
select,
button {
    animation: smoothEntry 0.3s ease-out;
    animation-fill-mode: backwards;
    animation-delay: 0.2s;
}



.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    justify-content: center;
    margin: 0;
    width: 100%;
    padding: 0;

}

.modal.is-active {
    display: flex;
}

.modal-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    height: 100vh;
    backdrop-filter: blur(20px);
}

.modal-content {
    position: relative;
    background: var(--menu-background);
    border-radius: 4px;
    width: 100%;
    max-height: 100vh;
    min-width: 80%;

    overflow-y: auto;
    margin: 0;

    z-index: 1;
    height: 100vh;
    backdrop-filter: blur(20px);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 24px;
}

/* Form Grid Layout */
.form-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 2rem;
    background: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px dashed var(--menu-background);
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
    background: var(--light-back);
}

.form-group.span-full {
    grid-column: 1 / -1;
}

/* Labels */
.form-group label {
    font-weight: 500;
    color: var(--text);
    font-size: 0.9rem;
}

/* Input Controls */
.input-control {
    position: relative;
}

.input-control select,
.input-control input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border:1px solid var(--primary)
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background-color: var(--menu-background);
    color: var(--text-contrast);
}

.input-control select:focus,
.input-control input[type="text"]:focus {
    border-color: #004466;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 68, 102, 0.1);
}

/* Input Groups */
.input-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

#backupDeviceScheduleFilePattern {
    background: var(--menu-background);
    opacity: 0.7;
}
#backupDeviceScheduleSourceProtocolIds {
    display: flex;
}

/* Section Headers */
.section-header {
    margin-bottom: 1rem;
}

.section-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.sub-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    font-size: 0.85rem;
    color: #666;
}

/* IP Range Sections */
.ip-range-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ip-range-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
}

.action-links {
    font-size: 0.9rem;
}

.action-links a {
    color: #004466;
    text-decoration: none;
}

.ip-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.ip-inputs.single {
    grid-template-columns: 1fr;
}

.add-ip-range {
    margin-top: 0.5rem;
}

.add-ip-range a {
    color: #004466;
    text-decoration: none;
    font-size: 0.9rem;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 1rem;

    padding-top: 1.5rem;

}
.form-actions.button-controls {
    top: -30px;
    position: fixed;
    right: 20px;
}
.button {
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    color: var(--text-contrast);
}

.is-dark {
    background: var(--primary);
    color: white;
    border: none;
}

.is-dark:hover {
    background: var(--secondary);
}

/* Utility Classes */
.hideElement {
    display: none;
}
.tab-button input {
    padding: 20px;
    width: 20px;
    height: 20px;
    margin-left: 20px;
    margin-top: 2px;
}
/* Error Message */
#errorMessage {
    /* Initially hidden with no transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.7);

    /* Rest of the base styles */
    position: fixed;
    top: 50%;
    left: 50%;
    background: var(--menu-background);
    color: var(--text);
    width: 500px;
    height: 250px;
    z-index: 2000;
    padding: 20px;
    border-radius: 5px;
    backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transform-origin: center center;
    will-change: transform, opacity;
}

/* Only add transitions when it's active */
#errorMessage.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.blocker {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.7);
	position: fixed;
	z-index: 2000;
	top: 0;
	backdrop-filter: blur(10px);
    display: none;
}
.blocker.active{
    display: block;
}
.showing{
    display: block;
}
.dialog {
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
    font-family: inherit;

    position: relative;
    height: 100%;
}



.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;

}

.dialog-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dialog-icon {
    display: flex;
    align-items: center;
}

.dialog-icon svg {
    width: 20px;
    height: 20px;
    color:var(--warning);
}

.dialog-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    font-size:1.5em;
    color:var(--warning);
}

.dialog-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-contrast);
    opacity: 0.7;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog-close:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
}

.dialog-content {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color:var(--text-contrast);

}
#backupDeviceScheduleFilePattern:placeholder-shown{
    display: none;
}
/* Responsive Design */


.filter-bar {
    background: var(--card-background);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px dotted var(--primary);
    margin-top: 10px;

}

.filter-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    opacity: 1;
}
.disabled{
    opacity: .2;
    filter: saturate(0);
    background: repeating-linear-gradient(
            45deg,
            var(--card-background),
            var(--card-background) 10px,
            var(--background) 10px,
            var(--background) 20px
    );
}
.search-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-input {
    width: 100%;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
    text-indent: 20px;
}
.search-input::placeholder{
    font-style: italic;
    color:var(--secondary);
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}
.count-display {

    top: 0px;
    font-size: 0.7em;

    position: absolute;
    display: inline-block;
    z-index: 100;
    background:var(--primary);
    color: white;

    border-radius: 7px;
    padding: 20px;

}
.filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #475569;
    cursor: pointer;
}

.filter-toggle:hover {
    background: #f8fafc;
}

.log-levels-compact {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.level-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 55px;

    border-radius: 12px;

    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hide the actual checkbox */
.level-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Unchecked state */
.level-chip span {
    color: grey;
    font-weight: bold;
    padding:  5px;
    width: 24px;
    text-align: center;
    height: 55px;
    align-content: center;
    opacity: .2;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/* Checked state */
.level-chip input[type="checkbox"]:checked + span {
    color: black;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    height: 55px;
    opacity: 1;
    border-radius: 16px;


}

.level-chip input[type="checkbox"]:checked ~ .level-chip {
    background-color: green;
    border: 1px solid #3b82f6;
}

/* Hover state */
.level-chip:hover {
    background: #e2e8f0;
}
label.level-chip:nth-of-type(1) span {
    background-color: #00ff00; /* Bright green for "0" (low threat) */
}

label.level-chip:nth-of-type(2) span {
    background-color: #66ff00; /* Lime green for "1" */
}

label.level-chip:nth-of-type(3) span {
    background-color: #ccff00; /* Yellow-green for "2" */
}

label.level-chip:nth-of-type(4) span {
    background-color: #ffff00; /* Yellow for "3" */
}

label.level-chip:nth-of-type(5) span {
    background-color: #ffcc00; /* Orange-yellow for "4" */
}

label.level-chip:nth-of-type(6) span {
    background-color: #ff9900; /* Orange for "5" */
}

label.level-chip:nth-of-type(7) span {
    background-color: #ff3300; /* Reddish-orange for "6" */
}

label.level-chip:nth-of-type(8) span {
    background-color: #ff0000; /* Bright red for "7" (high threat) */
}
label.level-chip span {
    border-radius: 20px;
}
.advanced-filters {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.advanced-filters.show {
    display: block;
}

.advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.filter-field input,
.filter-field select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem;
}

.datetime-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}

mark {
    background-color: var(--highlight);  /* Light yellow */
    padding: 0 6px;
    border-radius: 8px;
    color: var(--primary);
    border: 1px dotted var(--primary);
}

.log-controls {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--menu-background);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.log-stats {
    color: var(--text-contrast);
    font-size: 0.9rem;
}

.entries-count {
    padding: 0.5rem;
    border-radius: 4px;
}

#loadMoreLogEntriesButton {
    min-width: 200px;
    transition: all 0.2s ease;
}

#loadMoreLogEntriesButton:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .log-controls {
        flex-direction: column;
        text-align: center;
    }

    #loadMoreLogEntriesButton {
        width: 100%;
    }
}


.schedule-section {
    background: var(--background);
    border-radius: 12px;
    padding: 0;
    margin: 0;
}

.schedule-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}
.close-schedule {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--text-contrast);
  background: var(--primary);
}
/*.tab-content-wrapper {*/
/*    position: relative;*/
/*    min-height: 300px;*/
/*}*/


.schedule-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tab-button {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--card-background);
    color: var(--text-contrast);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-button.active {
    background: var(--primary);
    color: white;
}




/*Help section styles*/

/* Help Content Styles */
.how-to-use {
    padding: 2rem 3rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 900px;
    max-height: 100vh;
    overflow-y: auto;
    transform: translateY(-20px);
    transition: transform 0.3s ease-in-out;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.how-to-use h2 {
    color: #1a2b3c;
    font-size: 2.4rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #eef2f6;
}

.step {
    margin-bottom: 3rem;
}

.step h3 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.step h3::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 24px;
    background: #3498db;
    border-radius: 2px;
    margin-right: 12px;
}

.sub-step {
    margin: 1.5rem 0;
    padding-left: 2rem;
    border-left: 2px solid #eef2f6;
}

.sub-step h4 {
    color: #34495e;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.sub-step p {
    color: #5a6c7d;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.sub-step ul {
    list-style: none;
    padding-left: 0;
}

.sub-step li {
    color: #5a6c7d;
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
}

.sub-step li::before {
    content: '•';
    color: #3498db;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.sub-step strong {
    color: #2c3e50;
    font-weight: 600;
}

code {
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    color: #e74c3c;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.9em;
}








/*Timezone interaction*/
/* Base container */

.timezone-selector {
    position: relative;
    width: 100%;
}

.timezone-wrapper {
    position: relative;
}

/* Match your existing select style */
.timezone-control {
    background-color: #7f95a5;
    border: none;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    width: 100%;
    min-height: 42px;
    transition: background-color 0.2s;
}

.timezone-control:hover {
    background-color: #6f8595;
}

.selected-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timezone-time {
    opacity: 0.8;
    font-size: 0.9em;
}

.dropdown-arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    margin-left: 10px;
}

/* Dropdown styling */
.timezone-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: white;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
}

.timezone-dropdown.active {
    display: block;
}

.timezone-search {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
    padding: 20px;
    max-width: 300px;
}

.timezone-list {
    max-height: 300px;
    overflow-y: auto;
}

.region-group {
    padding: 10px 0;
}

.region-group h3 {
    padding: 5px 15px;
    margin: 0;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.timezone-options {
    padding: 5px 0;
}

.timezone-option {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
}

.timezone-option:hover {
    background-color: #f5f7fa;
}

.timezone-option.active {
    background-color: #7f95a5;
    color: white;
}

.hidden {
    display: none !important;
}





.searchable-select-wrapper {
    position: relative;
}

.searchable-select-search {
    width: 100%;
    padding: 8px;
    margin-bottom: 4px;
    border: 1px solid #cfd8dc;
    border-radius: 3px;
}

.searchable-select-wrapper select {
    width: 100%;
}

/* Match your existing select styling */
.searchable-select-search:focus {
    outline: none;
    border-color: #2c3e50;
}
/*End of timezones*/



.calendar-section {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
}

.calendar-block {
    flex: 1;
    background: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 1rem;
}

.calendar-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.months-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.month-cell, .day-cell, .weekday-cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    border: 1px solid #eee;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-cell:has(> input:disabled) {
    background: repeating-linear-gradient(
            45deg,
            var(--card-background),
            var(--card-background) 10px,
            var(--background) 10px,
            var(--background) 20px
    );
}

.month-cell:has(> input:disabled) {
    background: repeating-linear-gradient(
            45deg,
            var(--card-background),
            var(--card-background) 10px,
            var(--background) 10px,
            var(--background) 20px
    );
}

.weekday-cell:has(> input:disabled) {
    background: repeating-linear-gradient(
            45deg,
            var(--card-background),
            var(--card-background) 10px,
            var(--background) 10px,
            var(--background) 20px
    );
}

.month-cell input, .day-cell input , .weekday-cell input {
    position: absolute;
    opacity: 0;
}

.month-cell:hover, .day-cell:hover, .weekday-cell:hover {
    background: var(--secondary);
}

.month-cell input:checked + .month-name,
.day-cell input:checked + .day-number,
.weekday-cell input:checked + .weekday-name{
    color: white;
}

.month-cell input:checked + .month-name::before,
.day-cell input:checked + .day-number::before,
.weekday-cell input:checked + .weekday-name::before{
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    border-radius: 6px;
    z-index: -1;
}
.month-cell, .day-cell, .weekday-cell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card-background);
    border: 1px solid var(--highlight);
}

/* Hide the actual checkbox */
.month-cell input[type="checkbox"],
.day-cell input[type="checkbox"],
.weekday-cell input[type="checkbox"]{
    position: absolute;
    opacity: 0;
}

/* Style for checked state */
.month-cell input[type="checkbox"]:checked ~ span,
.day-cell input[type="checkbox"]:checked ~ span,
.weekday-cell input[type="checkbox"]:checked ~ span{
    color: var(--text-contrast);
}



/* Highlight entire cell when checked */
.month-cell input[type="checkbox"]:checked,
.day-cell input[type="checkbox"]:checked,
.weekday-cell input[type="checkbox"]:checked{
    background: var(--primary);
}

.month-cell:has(input:checked),
.day-cell:has(input:checked),
.weekday-cell:has(input:checked){
    background: var(--secondary);
    color: var(--text-contrast);
    border-color: #005f73;
    box-shadow: 0 2px 4px rgba(0, 95, 115, 0.2);
}

/* Hover state */
.month-cell:hover,
.day-cell:hover,
.weekday-cell:hover{
    background: var(--secondary);
    border-color: #0ea5e9;
}


.month-cell input[type="checkbox"]:checked ~ .month-cell,
.day-cell input[type="checkbox"]:checked ~ .day-cell {
    background: #005f73;
    color: white;
}



.month-name, .day-number {
    position: relative;
    font-size: 0.9rem;
    z-index: 1;
    user-select: none;
}
.weekday-name{
    user-select: none;
}



/* Week view specific styles */
.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.weekday-cell {
    aspect-ratio: 1;
    text-align: center;
    padding: 1rem;
}














/* Time Settings */
.time-settings {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.time-option-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.time-selectors {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.time-selectors select {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}






/* Performance optimization - only animate transform and opacity */
/** {*/
/*    will-change: transform, opacity;*/
/*}*/

/* Remove animations from specific elements where it might be jarring */
.logo,
.active-server,
input[type="checkbox"],
input[type="radio"] {
    animation: none;
}
.custom-datepicker-wrapper {
    position: relative;
    width: 100%;
    font-family: var(--font-body);
}

.datepicker-display {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--card-background);
    border: 1px solid var(--shadow);
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}

.datepicker-display:hover:not(:disabled) {
    border-color: var(--primary);
}

.datepicker-display:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--shadow);
}

.datepicker-display:disabled {
    background-color: var(--background);
    cursor: not-allowed;
}

.datepicker-container {
    display: none;
    position: absolute;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: var(--menu-background);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    padding: 12px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease-in-out;
}

.datepicker-container.above {
    bottom: 100%;
    margin-bottom: 4px;
}

.datepicker-container.below {
    top: 100%;
    margin-top: 4px;
}

.datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.current-month {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-contrast);
    font-family: var(--font-heading);
}

.prev-month,
.next-month {
    border: none;
    background: none;
    color: var(--text-contrast);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.prev-month:hover:not(:disabled),
.next-month:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--primary);
    transform: scale(1.1);
}

.prev-month:disabled,
.next-month:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 8px;
}

.weekdays div {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-contrast);
    padding: 4px;
    font-family: var(--font-accent);
    opacity: 0.7;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.day {
    text-align: center;
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: var(--text-contrast);
    position: relative;
    z-index: 1;
}

.day:not(.inactive):not(.disabled):hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
    z-index: 2;
}

.day.selected {
    background-color: var(--primary);
    color: var(--text-contrast);
    font-weight: bold;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.day.selected:hover {
    background-color: var(--secondary);
}

.day.inactive {
    color: rgba(255, 255, 255, 0.3);
    cursor: default;
}

.day.disabled {
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
    text-decoration: line-through;
}

.custom-datepicker-wrapper.disabled {
    opacity: 0.7;
    pointer-events: none;
}

/* Animation for opening/closing */
.datepicker-container {
    transform-origin: top center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.datepicker-container.above {
    transform-origin: bottom center;
}
.custom-timepicker-wrapper {
    position: relative;
    width: 100%;
    font-family: var(--font-body);
}

.timepicker-display {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--card-background);
    border: 1px solid var(--shadow);
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.timepicker-display:hover:not(:disabled) {
    border-color: var(--primary);
}

.timepicker-display:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--shadow);
}

.timepicker-display:disabled {
    background-color: var(--background);
    cursor: not-allowed;
}

.timepicker-container {
    display: none;
    position: absolute;
    left: 0;
    z-index: 1000;
    width: 200px;
    background: var(--menu-background);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    padding: 12px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease-in-out;
}

.timepicker-container.above {
    bottom: 100%;
    margin-bottom: 4px;
    transform-origin: bottom center;
}

.timepicker-container.below {
    top: 100%;
    margin-top: 4px;
    transform-origin: top center;
}

.time-columns {
    display: flex;
    align-items: stretch;
    height: 200px;
    gap: 8px;
}

.time-column {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

.time-column::-webkit-scrollbar {
    width: 4px;
}

.time-column::-webkit-scrollbar-track {
    background: transparent;
}

.time-column::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 4px;
}

.time-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-contrast);
    font-weight: bold;
    padding: 0 4px;
}

.time-option {
    padding: 8px;
    text-align: center;
    cursor: pointer;
    color: var(--text-contrast);
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
}

.time-option:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /*transform: scale(1.05);*/
}

.time-option.selected {
    background-color: var(--primary);
    color: var(--text-contrast);
    font-weight: bold;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.custom-timepicker-wrapper.disabled {
    opacity: 0.7;
    pointer-events: none;
}

/* Animation for opening/closing */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timepicker-container.below {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timepicker-container.above {
    animation: fadeInUp 0.2s ease-out;
}
.date-time-group {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.date-time-group .form-group {
    flex: 1;
    min-width: 0; /* This prevents flex items from overflowing */
}

/* If you need to adjust the popup positioning */
.date-time-group .custom-datepicker-wrapper,
.date-time-group .custom-timepicker-wrapper {
    position: relative;
    z-index: 10;
}





/* Summary Section */
.schedule-summary {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--primary-light);
    border-radius: 8px;
}

.highlight {
    color: var(--primary);
    font-weight: 500;
}


.schedule-viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
    height: 100vh;
}

.schedule-slider {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    width: 300%;
}

.tab-content {
    flex: 0 0 33.333%;
    padding: 1rem;
}

.schedule-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tab-button {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--card-background);
    color: var(--text);
}

.tab-button.active {
    background: var(--primary);
    color: white;
}










 .schedule-list {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

.schedule-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border:1px solid var(--primary);
    transition: all 0.3s ease;
}
.schedule-header {
    display: grid;
    /* Adjust the middle column (2fr -> 3fr) to give more space for tags */
    grid-template-columns: minmax(450px, 2fr) minmax(200px, 3fr) auto;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    background: var(--menu-background);
    cursor: pointer;
}

.schedule-title h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-contrast);
}

.schedule-subtitle {
    font-size: 0.9rem;
    color: var(--text-contrast);
}

.schedule-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}



/* And let's improve the tags layout */
.schedule-tags {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    gap: 0.5rem;
    align-items: center;
}

.schedule-tag {
    background: #e2e8f0;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    color: #475569;
    white-space: nowrap; /* Prevent tag text from wrapping */
}

.schedule-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.expand-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}


.schedule-item.expanded .expand-toggle {
    transform: rotate(180deg);
}

.schedule-details {
    display: none;
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: var(--light-back);
}

.schedule-item.expanded .schedule-details {
    display: block;
}


.details-grid {
    display: grid;
    /* Customize the column sizes based on content needs */
    grid-template-columns:
        minmax(100px, 0.5fr)  /* ID - smaller */
        minmax(300px, 2fr)    /* Source Protocols - larger */
        minmax(200px, 1fr)    /* External Protocol */
        minmax(200px, 1fr)    /* Time Zone */
        minmax(200px, 1fr);   /* Start Timestamp */
    gap: 1.5rem;
}

.detail-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-group label {
    font-weight: 500;
    color: #64748b;
}

.protocol-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}


.protocol-indicators {
    display: flex;
    gap: 4px;
    margin-top: 0.5rem;
}

.protocol-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4CAF50;
    background-image: -webkit-linear-gradient(top, #13fB04 0%, #58e343 50%, #ADED99 100%);

    display: inline-block;
}





/*Hint styles*/


.hint-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
}

/* Permanent hint styles */
.hint-permanent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f9ebc1;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: #121212;
    padding: 10px;
    margin: 10px;
    margin-left: 0;
    border-radius: 10px;
    border: 1px dotted var(--menu-background);
}

.hint-permanent .hint-icon {
    color: var(--success);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Hidden hint styles */
.hint-trigger {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hint-background, #e0e0e0);
    color: var(--hint-color, #666);
    font-size: 12px;
    cursor: help;
    border: none;
}

.hint-content {
    position: absolute;
    width: max-content;
    max-width: 300px;
    background: var(--hint-popup-background, #ffffff);
    border: 1px solid var(--hint-popup-border, #e0e0e0);
    border-radius: 4px;
    padding: 0.75rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 0.875rem;
    color: var(--hint-popup-color, #333);
    z-index: 1000;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.hint-hidden .hint-wrapper:hover .hint-content,
.hint-hidden .hint-trigger:focus + .hint-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-4px);
}

.hint-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--hint-popup-border, #e0e0e0);
}

.hint-content::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--hint-popup-background, #ffffff);
    margin-top: -1px;
    z-index: 1;
}

.hint-wrapper.hint-left .hint-content {
    left: 0;
    transform: translateX(0) translateY(-8px);
}

.hint-wrapper.hint-left:hover .hint-content {
    transform: translateX(0) translateY(-4px);
}

.hint-wrapper.hint-right .hint-content {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-8px);
}

.hint-wrapper.hint-right:hover .hint-content {
    transform: translateX(0) translateY(-4px);
}



/*.schedule-header {*/
/*    display: grid;*/
/*    grid-template-columns: minmax(300px, 2fr) 2fr auto;*/
/*    align-items: start;  !* Changed from center to allow for protocol dots *!*/
/*    padding: 1rem;*/
/*    gap: 1rem;*/
/*    background: #f8fafc;*/
/*    cursor: pointer;*/
/*}*/

/* Adjust title section for protocol dots */
.schedule-title {
    display: flex;
    flex-direction: column;
}



.protocol-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.protocol-item input[type="checkbox"] {
    flex-shrink: 0;
}

.protocol-item span {
    flex: 1;
}

.protocol-item abbr {
    flex-shrink: 0;
}





@media (max-width: 768px) {
    .form-container {
        grid-template-columns: 1fr;
        padding:0;
    }
    .tab-content {
        flex: 0 0 33.333%;
        padding: 0;
    }
    .ip-inputs {
        grid-template-columns: 1fr;
    }
    table{
        display: flow-root list-item;
        background:var(--background);
    }
    .modal-card,
    .modal-content {
        margin:0 auto;
        height:calc(100vh - 40px);


    }
    body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* Modal fixes */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        display: none;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    .modal-content {
        position: relative;
        background: var(--background);
        border-radius: 4px;
        max-width: 100%;
        max-height: 100vh;
        min-width: 100%;
        overflow-y: auto;
        margin: 0;
        padding: 0;
        z-index: 1;
        height: 100vh;

    }
}

/* Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}