/* =======================================================
   GLOBAL THEME
======================================================= */
body {
    background: #f5f7fb !important;
    font-family: 'Segoe UI', Roboto, sans-serif;
    color: #333;
}

/* =======================================================
   SIDEBAR
======================================================= */
#sidebar {
    width: 260px;
    min-height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    padding: 25px;
    background: linear-gradient(180deg, #1f2b70, #293f9f);
    color: white;
    box-shadow: 4px 0 15px rgba(0,0,0,0.2);
    border-right: 1px solid rgba(255,255,255,0.12);
}

.sidebar-title {
    padding: 12px 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
}

.sidebar-menu .sidebar-link {
    font-size: 1.1rem;
    padding: 10px 12px;
    border-radius: 8px;
    color: #e3e3e3;
    transition: 0.25s;
}

.sidebar-menu .sidebar-link:hover {
    background: rgba(255,255,255,0.22);
    color: white;
    padding-left: 18px;
    cursor: pointer;
}

/* =======================================================
   MAIN CONTENT
======================================================= */
#main-content {
    margin-left: 300px;
    padding: 30px;
}

.page-title {
    font-size: 2rem;
    background: linear-gradient(90deg, #253a7a, #3756c2);
    color: white;
    padding: 12px 25px;
    border-radius: 10px;
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* =======================================================
   CARD STYLING
======================================================= */
.upgraded-card {
    border-radius: 14px;
    overflow: hidden;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.card-header-dark {
    background: #2c2c2c !important;
    color: white !important;
    font-weight: bold;
}

.card-header-primary {
    background: #264bcf !important;
    color: white !important;
    font-weight: bold;
}

.card-header-secondary {
    background: #6d6d6d !important;
    color: white !important;
}

/* =======================================================
   INPUTS
======================================================= */
.modern-input {
    border-radius: 10px !important;
    padding: 10px 14px;
    border: 1px solid #cdd3e0;
    transition: 0.25s;
}

.modern-input:focus {
    border-color: #4060ff;
    box-shadow: 0 0 8px rgba(64,96,255,0.25);
}

.modern-select {
    border-radius: 10px !important;
    padding: 8px 12px;
    border: 1px solid #cdd3e0;
}

/* Disabled HTF */
.catch-box:disabled {
    background: #ececec;
    color: #777;
}

/* =======================================================
   BUTTONS
======================================================= */
.glow-btn {
    transition: 0.25s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.glow-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

/* =======================================================
   PROGRESS BAR
======================================================= */
.progress-upgraded {
    height: 24px;
    border-radius: 12px;
    background: #d8d8d8;
    overflow: hidden;
}

#progressBar {
    font-weight: bold;
    font-size: 1rem;
}

/* =======================================================
   OUTPUT BOX
======================================================= */
.animated-output {
    animation: fadePop 0.35s ease-out;
}

@keyframes fadePop {
    0% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* =======================================================
   RESPONSIVE
======================================================= */
@media (max-width: 992px) {
    #sidebar {
        position: relative;
        width: 100%;
        min-height: auto;
    }

    #main-content {
        margin-left: 0;
    }
}

/* When file is selected */
.file-selected {
    border-color: #28a745 !important;
    background: #dbffe3 !important;
}

/* RESET HTF ready state */
.reset-ready {
    background: #28a745 !important;
    color: white !important;
    border-color: #1e7e34 !important;
    box-shadow: 0 0 8px rgba(40,167,69,0.5);
    transition: 0.25s;
}


/* Wrap input + counter */
.lej-wrapper {
    position: relative;
}

/* Counter inside input (right side) */
.digit-counter-inside {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: #666;
    pointer-events: none;
    background: transparent;
}

/* When valid (20 digits) turn green */
.lej-valid {
    border: 2px solid #28a745 !important;
    background: #eaffea !important;
}

/* Shake animation for invalid paste */
@keyframes shake {
    0% { transform: translateX(0px); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
    100% { transform: translateX(0px); }
}

.shake-error {
    animation: shake 0.4s ease;
    background: #ffdddd !important;
    border-color: #ff3333 !important;
}

/* Increase the lej input fields to scale with screen */
.lej-wrapper .lej-input {
    width: 100% !important;
    max-width: 400px;      /* limit if screen is large */
    padding-right: 50px !important;
}


/* Latest HTF warning style */
.htf-warning {
    background-color: #ffdddd !important;
    border: 1px solid #ff6b6b !important;
}