/* General Reset */
@font-face {
    font-family: 'CRC55';
    src: url('../Fonts/CRC55.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Define the gradient as a CSS variable */
:root {
    --linear-gradient: linear-gradient(-46deg, #5d7eff 0%, rgba(70, 8, 179, 0.58) 100%);
}

html, body {
    height: 100%; /* Ensure the root elements have a height */
    margin: 0; /* Remove default margin */
}

body {
    font-family: 'CRC55'; /* Using the project font */
    color: #333;
    line-height: 1.6;
    font-size: 16px;
    background-color: #FAFAFA;
    overflow: hidden;
}

/* Links */
a {
    text-decoration: none;
    color: #007BFF;
    transition: color 0.3s;
}

a:hover {
    color: #0056b3;
}

/* Admin Container Layout */
.admin-container {
    display: flex;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent scrolling on the entire container */
}

/* Buttons */
button {
    padding: 8px 10px 7px;
    font-size: 14px;
    background-color: transparent;
    border: 1px solid #E2E2E2;
    color: #686868;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s, box-shadow 0.3s;
}

button:hover {
    background-color: transparent;
    box-shadow:none;
    color: black;
    border: 1px solid black;
}

button:disabled {
    background-color: #dcdde1;
    cursor: not-allowed;
}

/* Form Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    font-family: inherit;
    background-color: #FFFFFF;
    color: #686868;
    font-size: 14px;
    transition: all 0.3s ease-in-out;

}
select {
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    padding: 10px;
    padding-right: 3rem; /* Increase padding-right */
    font-size: 14px;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    background-color: #FFFFFF;
    background-image: url('data:image/svg+xml;charset=UTF-8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.476 14.236"><path id="angles-up-down" d="M2.591,5.675a.89.89,0,0,1-.007-1.259L6.174.785a2.669,2.669,0,0,1,3.779,0l3.593,3.634A.89.89,0,0,1,12.28,5.668L8.69,2.037a.913.913,0,0,0-1.255,0L3.849,5.668a.89.89,0,0,1-1.258.007ZM12.28,8.568,8.693,12.2a.914.914,0,0,1-1.255,0L3.849,8.568A.89.89,0,0,0,2.584,9.819l3.593,3.634a2.669,2.669,0,0,0,3.779,0l3.59-3.631A.89.89,0,1,0,12.28,8.568Z" transform="translate(-2.326)" fill="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center; /* Adjust for the edge cut-off */
    background-size: 10px; /* Icon size */
    cursor: pointer;
    box-sizing: border-box; /* Include padding in width */
    transition: all 0.3s ease-in-out;
}

select:focus {
    outline: none;
    border-color: #0055FF;
    box-shadow: 0px 0px 6px rgba(0, 85, 255, 0.2);
}

input[type="file"]::file-selector-button {
    font-family: inherit;
    border: 1px solid #E2E2E2;
    background-color: transparent;
    color: #686868;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}


input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #0055FF;
    outline: none;
    box-shadow: 0px 0px 6px rgba(0, 85, 255, 0.2);
}

input[type="submit"] {
    background-color: #0055FF;
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease-in-out;
}

input[type="submit"]:hover {
    background-color: #0039B3;
}

/* Headings */
h1, h2, h3 {
    margin-bottom: 15px;
    font-weight: bold;
    font-family: inherit;
}

h1 {
    font-size: 24px;
    font-weight:normal;
}

h2 {
    font-size: 20px;
    font-weight:normal;
}

h3 {
    font-size: 18px;
    font-weight:normal;
}

/* Sidebar */
.sidebar {
    width: 300px; /* Fixed width */
    background-color: #FFFFFF;
    border-right: 1px solid #E2E2E2;
    flex-shrink: 0; /* Prevent shrinking */
    height: 100vh; /* Full viewport height */
    position: sticky; /* Keeps it in place during scrolling */
    top: 0; /* Ensures it's fixed relative to the viewport */
    overflow: hidden; /* Prevents sidebar from scrolling */
    transition: width 0.3s ease;
}

.sidebar .header {
    justify-content: flex-start;
    background-color: inherit;
}

.sidebar h1 span {
    font-size: 8px;
    padding: 1px 3px 0px;
    border-radius: 4px;
    position: absolute;
    margin-left: 4px;
    cursor: pointer;
    background-color: #FAFAFA;
    border: 1px solid #cdcdcd;
}

.sidebar.collapsed {
    width: 0px;
    overflow: hidden;
}

.sidebar ul {
    list-style: none;
    padding: 15px;
    margin: 0;
}

.sidebar ul li {
    margin: 0 0 10px 0;
}

.sidebar ul li a {
    display: block;
    padding: 12px 12px 10px 12px;
    background-color: #FFFFFF;
    color: #333;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background 0.3s ease;
}

.sidebar ul li a:hover {
    background-color: #F4F4F4;
    border-color: #E2E2E2;
}

.sidebar ul li a.active {
    border-color: #E2E2E2;
}

.toggle-sidebar {
    width: 40px;
    height: 40px;
    border: none;
    font-size: 20px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    padding: 10px;
    background-color: transparent;
    box-shadow:none;
}

.toggle-sidebar:hover {
    background-color: transparent;
    box-shadow:none;
    border: none;
}

toggle-sidebar svg {
    color: var(--linear-gradient);
}

/* Header */
main .header {
    position: sticky;
    top: 0;
    padding: 5px 15px;
}

.header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E2E2E2;
    background-color: #FAFAFA;
}

.header h1 {
    font-size: 24px;
    color: #333;
    margin: 0;
    height: 33px;
}

.header .user-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.header .toggle-sidebar {
    margin-right: 5px;
}

/* Increase hoverable area for user-menu */
.user-menu {
    position: relative;
    display: inline-block;
    padding: 10px;
    cursor: pointer;
}

.user-menu .dropdown {
    position: absolute;
    top: 60px;
    right: 0;
    display: none;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    z-index: 1000;
    min-width: 220px;
}

.user-menu:hover .dropdown,
.user-menu:focus-within .dropdown {
    display: block;
}

/* Increase padding for dropdown items */
.user-menu .dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-menu .dropdown ul li {
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.user-menu .dropdown ul li:first-of-type {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.user-menu .dropdown ul li:last-of-type {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.user-menu .dropdown ul li a {
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    display: block;
}

.user-menu .dropdown ul li:hover a {
    background-color: #f4f4f4; /* Highlight hovered item */
    border-radius: 5px;
}

/* Page Content */
#dashboard {
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 132px);
    text-align: center;
}
#dashboard.active {
    display: flex;
}
#page-content {
    padding: 20px;
    flex: 1;
    flex-direction: column;
    min-height: calc(100vh - 92px);
    display: flex;
}

.main-content {
    flex: 1; /* Take up remaining space */
    overflow-y: auto; /* Allow scrolling only in the content area */
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.p-20 {
    padding: 20px;
}

.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    position: absolute !important;
    z-index: -1 !important; /* Ensure it doesn't interfere with other elements */
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

/* Knowledgebase Management */
.content-section .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.content-section .content-header .upload-btn,
#manage-users .addUser-btn {
    display: flex;
    align-items: inherit;
    gap: 0px;
    cursor: pointer;
    border-radius: 100%;
    width: 40px;
    height: 40px;
}
#UserModal footer label input {
    display: flex;
    margin-bottom: 2px;
    margin-right: 6px;
    margin-left: 1px;
}
#UserModal footer label {
    display: flex;
}

.content-section .content-header .upload-btn svg {
    height: 18px;
    width: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table th, table td {
    border-bottom: 1px solid #E2E2E2;
    padding: 12px;
    text-align: left;
    word-wrap: break-word; /* Break long words */
    white-space: normal; /* Allow text to wrap */
    vertical-align: top;
}
table th:first-of-type, 
table td:first-of-type {
    padding-left: 0px;
}
table th:last-of-type, 
table td:last-of-type {
    padding-right: 0px;
}

table th.NoWrap,
table td.NoWrap {
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
}

table th {
    font-size: 18px;
}

.chunk {
    background-color: #bcceff;
    color: black;
    padding: 2px 6px 0px 6px;
    border-radius: 12px;
    margin: 0 2px 0px;
    display: inline-block;
    font-size: 8px;
    text-transform: uppercase;
}

.chunk.total {
    background-color: #69ff56;
}

.chunk.missing {
    background-color: #ff4c4c;
}

.chunk.total {
    background-color: #69ff56;
}

.chunk.concern {
    background-color: #ffc34c;
}

table tr td {
    transition: background-color 0.3s;
    vertical-align: middle;
}
table tr:hover td,
table tr:focus td {
    background-color: #f5f5f5;
}
table td.actions button,
table td.actions a {
    background-color: transparent;
    color:#777779;
    padding: 0 8px;
    border:none;
}

table td.actions button:hover,
table td.actions a:hover {
    background-color: transparent;
    color:#333;
    box-shadow:none;
}

table td.actions button svg,
table td.actions a svg {
    height: auto;
    width: 18px;
}

/* Infoblocks */
div.InfoBlocks {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
div.InfoBlocks div.Block {
    display: flex;
    border: 1px solid #E2E2E2;
    color: black;
    padding: 8px 12px 6px;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 10px;
}
div.InfoBlocks div.Block span {
    display: contents;
}
table td .FileType {
    height: 18px;
    width: auto;
    margin-right: 8px;
    float: left;
}
/* Modal */

/* Generic Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease;
}

.modal-content {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
    width: auto;
    max-width: 50vw;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#AdministrationUI .modal-content {
    max-width: 80vw;
}

.modal-content h3 {
    margin-bottom: 15px;
}

.modal-content .close-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 20px;
    cursor: pointer;
    color: #555;
    font-weight: bold;
}

.modal.hidden {
    display: none;
    transition: visibility 0.3s, opacity 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
    visibility: visible;
    transition: visibility 0.3s, opacity 0.3s ease;
}

.modal footer {
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin-top: 10px;
}

.modal footer p {
    font-size: 10px;
    color: #686868;
}

/* Translations Section */
#translations h2,
#assistants h2,
#questions h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.translation-item,
.assistants-item {
    margin-bottom: 20px;
}

.translation-item h3,
.assistants-item h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #555;
}

.translation-fields,
.assistants-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.field {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
}

.field label {
    width: 20%;
}

.field .InfoIcon {
    color: #c4c4c4;
    display: inline-block;
    margin: 0px 0 0 12px;
    cursor: pointer;
}

.field .InfoIcon svg {
    width: auto;
    height: 12px;
}

.field input[type="text"],
.field textarea,
.field select {
    max-width: 80%;
}

.field textarea {
    min-height: 300px;
}
.field input[type="number"],
.field select {
    width: auto;
}

.field input[type="text"]:focus {
    border-color: #0055FF;
    outline: none;
    box-shadow: 0px 0px 6px rgba(0, 85, 255, 0.2);
}

.content-section footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.PoweredBy {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 11px;
    color: #ddd;
}

  
#progress-bar-container {
    width: 100%;
    background-color: #dbdbdb;
    border: 1px solid #919191;
    border-radius: 10px;
    margin-top: 10px;
    height: 36px;
    display: none;
    overflow: hidden;
  }
  
  #progress-bar {
    height: 100%;
    width: 0%;
    background-color: #1b1b1b;
    transition: width 0.3s ease;
  }
  
  #progress-bar-text {
    position: relative;
    top: -29px;
    left: 12px;
    font-size: 14px;
    color: #ffffff;
  }
  
#loading-spinner,
#manageusers-loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    animation: spin 0.8s linear infinite;
    width: 16px;
    height: 16px;
}

.spinner circle {
    stroke: #141414;
    stroke-dasharray: 150;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -125;
    }
}

[data-title]:hover:after,
[data-title]:focus:after {
    opacity: 1;
    transition: opacity 0.7s ease 0.7s;
    visibility: visible;
}
[data-title]:after,
[data-title]:focus {
    content: attr(data-title);
    position: absolute;
    top: 80%;
    left: 120%;
    padding: 4px 4px 4px 8px;
    color: #222;
    white-space: wrap; 
    border-radius: 8px;
    cursor: pointer;
    background-color: #FAFAFA;
    border: 1px solid #cdcdcd;
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
    font-size: 12px;
    min-width: 240px;
    color: #989898;
}
[data-title] {
    position: relative;
    transition: opacity 0.7s ease 0.7s;
}

.LoginModal {
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
    padding: 0;
    align-items: center; /* Vertically center contents */
    height: 100%; /* Ensure full height of the parent container */
    max-width: 100%;
}
.LoginModal .Left {
    display: flex;
    flex-direction: column;
    flex: auto;
    background-color: #f9f9f9;
    background:url("../Images/LoginBG.png") no-repeat center center;
    background-size: cover;
    padding: 0;
    width: 78%;
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally if needed */
    height: inherit;
}
.LoginModal .Right {
    display: flex;
    flex-flow: column;
    flex: auto;
    padding: 30px;
    width: auto;
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally if needed */
    max-width: 50%;
}
.LoginModal .Right > svg {
    height: 80px;
    width: auto;
    border-radius: 0;
}
.LoginModal h3 {
    margin-top: 24px;
}
.LoginModal .Error {
    background-color: #ff4c4c;
    border: 1px solid #d52727;
    color: white;
    padding: 12px 12px 10px;
    border-radius: 10px;
    display: none;
}
.LoginModal button[type="submit"] {
    margin-top: 10px;
    padding: 14px 14px 12px;
    background-color: #69ff56;
    color: black;
    border: none;
    float: right;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 14px;
    transition: transform 0.3s ease;
    width: 100%;
}

.LoginModal button[type="submit"]:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.LoginModal button[type="submit"]:active {
    transform: scale(0.95);
}.LoginModal input[type="text"]:focus,
.LoginModal input[type="password"]:focus,
.LoginModal input[type="email"]:focus {
    color: black;
    border-color: #aac6ff;
    box-shadow: 0 0 8px rgba(0, 85, 255, 0.3);
    transform: scale(1.02);
}
.user-avatar {
    display: flex;
    height: 40px;
    width: 40px;
    transition: all 0.3s ease 0.3s;
}
.user-avatar.blank{
    padding:6px;
}
.user-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    font-family: 'CRC55', sans-serif; /* Use your project font */
    cursor: pointer;
    line-height: 1; /* Reduce line-height to minimize vertical alignment issues */
    padding-top: 2px; /* Add slight top padding to compensate */
}

/* Loader */
.container {
    --uib-size: 20px;
    --uib-color: black;
    --uib-speed: 2s;
    --uib-bg-opacity: 0;
    height: var(--uib-size);
    width: var(--uib-size);
    transform-origin: center;
    animation: rotate var(--uib-speed) linear infinite;
    will-change: transform;
    overflow: visible;
}

.car {
    fill: none;
    stroke: var(--uib-color);
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: stretch calc(var(--uib-speed) * 0.75) ease-in-out infinite;
    will-change: stroke-dasharray, stroke-dashoffset;
    transition: stroke 0.5s ease;
}

.track {
    fill: none;
    stroke: var(--uib-color);
    opacity: var(--uib-bg-opacity);
    transition: stroke 0.5s ease;
}

@keyframes rotate {
    100% {
    transform: rotate(360deg);
    }
}

@keyframes stretch {
    0% {
    stroke-dasharray: 0, 150;
    stroke-dashoffset: 0;
    }
    50% {
    stroke-dasharray: 75, 150;
    stroke-dashoffset: -25;
    }
    100% {
    stroke-dashoffset: -100;
    }
}

/* Loader */
.PageLoader {
    width: 100vw;
    display: flex;
    height: 100vh;
    align-items: center;
    margin: auto;
}
.PageLoader svg {
    margin: auto;
}


/* ✅ Smooth Login Form Transitions */
#loginForm {
    animation: fadeIn 0.5s ease-in-out; /* Fade-in animation */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* ✅ Input Fields: Smooth Focus & Hover */
#loginForm input[type="text"],
#loginForm input[type="password"],
#loginForm input[type="email"] {
    transition: all 0.3s ease-in-out;
}

#loginForm input:focus {
    border-color: #a1c0ff;
    box-shadow: 0px 0px 8px rgba(0, 85, 255, 0.3);
    transform: scale(1.02);
}

/* ✅ OTP Field: Smooth Reveal */
#otp-input {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    height: 0; /* Collapses the element */
    overflow: hidden;
    padding: 0; /* Removes padding when hidden */
    border: none; /* Hides the border when hidden */
}

/* ✅ When Shown: Fade In & Slide Down Smoothly */
#otp-input.show {
    opacity: 1;
    transform: translateY(0);
    height: auto; /* Expands the element */
    padding: 14px 14px 12px; /* Restores padding */
    border: 1px solid #E2E2E2; /* Restore border */
}

/* ✅ Button: Soft Hover & Click Effects */
#loginForm button {
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

#loginForm button:hover {
    transform: scale(1.05);
}

#loginForm button:active {
    transform: scale(0.95);
}

/* ✅ Fade-In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#UserLogsModal .modal-content {
  width: 60vw;
}

#UserLogsModal .modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

/* 🔄 Smooth transition for login/registration form toggling */
#loginForm,
#registrationForm {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s ease-in-out;
  position: absolute;
  width: 100%;
}

#loginForm.show,
#registrationForm.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
}

.fade-slide {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease-in-out;
}

.fade-slide.show {
    opacity: 1;
    transform: translateY(0);
}

#loginForm,
#registrationForm {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease-in-out;
    position: absolute;
    width: 100%;
}

#loginForm:not(.hidden),
#registrationForm:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
}

.form-wrapper {
    position: relative;
    max-width: 88%;
}

#registrationForm label.checkbox-label {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 10px;
}
#registrationForm hr {
    clear: both;
    margin: 30px 0 16px;
    border: 0;
    border-bottom: 1px solid #f4f4f4;
}

#switchToRegisterContainer {
    display: block;
    margin-top: 72px;
    text-align: center;
}

#switchToLogin {
    display: block;
    text-align: center;
}

.form-row {
    display: flex;
    gap: 10px;
}

#TermsModal .modal-content {
    max-width: 60vw;
}

.no-border {
    border: none !important;
}

/* ===============================
   Instances UI (namespaced: inst-)
   =============================== */

/* Header */
.inst-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  
  /* List container */
  .inst-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* Card/row base */
  .inst-row {
    display: grid;
    grid-template-columns: 220px 150px 1fr 210px 230px 210px; /* name | created | links | status | source | actions */
    gap: 12px;
    align-items: center;
    padding: 12px 14px 10px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
  }
  
  /* Name block */
  .inst-name {
    font-size: 20px;
    color: #333;
    font-weight: 600;
  }
  .inst-created {
    font-size: 12px;
    color: #777779;
  }
  
  /* Quick links (plain text for now) */
  .inst-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #686868;
  }
  
  /* Status badge */
  .inst-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 5px;
    border-radius: 999px;
    border: 1px solid #E2E2E2;
    font-size: 12px;
    color: #333;
    background: #FAFAFA;
  }
  .inst-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
  }
  
  /* Variants */
  .inst-ok { background: #eaf9ef; border-color: #bfe8cd; color: #215a33; }
  .inst-ok::before { background: #28a745; }
  
  .inst-warn { background: #fff6e6; border-color: #ffe0a8; color: #6a4a00; }
  .inst-warn::before { background: #ffb020; }
  
  .inst-off { background: #f3f4f6; border-color: #E2E2E2; color: #555; }
  .inst-off::before { background: #9aa0a6; }
  
  /* Source info */
  .inst-source {
    font-size: 12px;
    color: #686868;
    word-break: break-word;
  }
  
  /* Actions */
  .inst-actions {
    display: inline-flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  
  /* Buttons */
  .inst-btn {
    padding: 8px 10px 7px;
    font-size: 13px;
    background-color: transparent;
    border: 1px solid #E2E2E2;
    color: #686868;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
  }
  .inst-btn:focus-visible {
    outline: 2px solid #0055FF;
    outline-offset: 1px;
  }
  .inst-btn:hover {
    color: #000;
    border-color: #000;
    background: transparent;
  }
  
  .inst-primary {
    background: #0055FF;
    color: #fff;
    border-color: #0055FF;
  }
  .inst-primary:hover {
    background: #0039B3;
    border-color: #0039B3;
    color: #fff;
  }
  
  .inst-danger {
    background: #ff4c4c;
    color: #fff;
    border-color: #ff4c4c;
  }
  .inst-danger:hover {
    background: #d52727;
    border-color: #d52727;
    color: #fff;
  }
  
  .inst-ghost {
    background: transparent;
    color: #686868;
    border-color: #E2E2E2;
  }
  .inst-ghost:hover {
    color: #000;
    border-color: #000;
  }
  
  /* Kebab (mobile overflow actions) */
  .inst-kebab {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Empty state */
  .inst-empty {
    text-align: center;
    padding: 40px 20px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    color: #686868;
  }
  .inst-empty h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .inst-empty p {
    font-size: 13px;
    margin-bottom: 16px;
  }
  
  /* Wizard modal (static) */
  #inst-wizard.modal .modal-content,
  #inst-confirm.modal .modal-content {
    max-width: 720px; /* stay within your modal pattern */
  }
  .inst-wizard-body {
    display: grid;
    gap: 12px;
  }
  .inst-wizard-steps {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .inst-step-chip {
    font-size: 12px;
    padding: 6px 10px 5px;
    border-radius: 999px;
    border: 1px solid #E2E2E2;
    background: #FAFAFA;
    color: #686868;
  }
  .inst-step-chip.active {
    background: #eaf0ff;
    border-color: #aac6ff;
    color: #0039B3;
  }
  
  /* Wizard controls */
  .inst-wizard-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
  }
  
  /* Progress bar (fake) */
  .inst-progress-wrap {
    width: 100%;
    background-color: #dbdbdb;
    border: 1px solid #919191;
    border-radius: 10px;
    height: 12px;
    overflow: hidden;
  }
  .inst-progress {
    height: 100%;
    width: 0%;
    background-color: #1b1b1b;
    transition: width 0.2s ease;
  }
  
  /* DNS check message */
  .inst-dns-msg {
    font-size: 12px;
    color: #686868;
  }
  .inst-dns-ok { color: #215a33; }
  .inst-dns-warn { color: #6a4a00; }
  
  /* Responsive: stack to cards on narrow widths */
  @media (max-width: 1100px) {
    .inst-row {
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: flex-start;
    }
    .inst-actions {
      justify-content: flex-start;
    }
  }
  
  /* Accessibility */
  #instances a, #instances button, #instances [tabindex] {
    outline-offset: 1px;
  }

/* --- Instances width/overflow hardening --- */
.inst-list { max-width: 100%; overflow-x: hidden; }
.inst-row  {
    margin-top: 12px;
    /* 5 columns now: Name | Links | Status | Source | Actions */
    grid-template-columns: 1.2fr 2.6fr auto 1.2fr 1.1fr;
    max-width: 100%;
}
.inst-links { word-break: break-word; }

/* --- Wizard width to ~80% of viewport --- */
#inst-wizard.modal .modal-content { 
  max-width: 80vw; 
  width: 80vw;
}

/* --- Fix: wizard modal height & scrolling --- */
#inst-wizard.modal .modal-content {
    max-height: 86vh;           /* keep modal within viewport */
    display: flex;               /* vertical stack: header + body + footer */
    flex-direction: column;
}
  
  /* make only the body scrollable */
#inst-wizard .inst-wizard-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 8px;          /* gutter so scrollbar doesn’t overlay text */
    min-height: 0;               /* prevents flex overflow issues */
    -webkit-overflow-scrolling: touch; /* smooth on iOS */
}
  
  /* keep step chips and controls pinned */
#inst-wizard .inst-wizard-steps,
#inst-wizard .inst-wizard-controls {
    flex: 0 0 auto;
}

/* --- Wizard spacing + separators --- */
.inst-wizard-body {
  padding: 14px 2px;
  border-top: 1px solid #E2E2E2;
  border-bottom: 1px solid #E2E2E2;
  margin: 8px 0 10px;
}
.inst-wizard-controls { 
  padding-top: 8px;
}

/* --- Fix HR overlap above Email Setup block --- */
#inst-wizard .inst-wizard-body hr {
    margin-top: 20px;     /* more breathing room above */
    margin-bottom: 12px;  /* space before next block title */
    border: none;         /* reset default thick border */
    border-top: 1px solid #e6e6e6; /* subtle divider line */
    opacity: 1;           /* ensure visible on all themes */
}

/* Instances: header row look */
.inst-head {
    background: #FAFAFA;
    border-color: #E2E2E2;
  }
  .inst-head .inst-col-title {
    font-size: 12px;
    font-weight: 600;
    color: #686868;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  
  /* Prevent any grid cell from forcing horizontal scroll */
  #instances .inst-row > div { min-width: 0; }
  #instances .inst-links { min-width: 0; word-break: break-word; }

  .modal .close-btn { position: absolute; right: 12px; top: 10px; z-index: 3; cursor: pointer; }

  .visually-hidden { visibility: hidden; }

  /* --- Instance Button Spinner --- */
.inst-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.2);  /* light outer ring */
    border-top-color: #000;                /* default black */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
  }
  
  .inst-btn.inst-danger .inst-spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;                /* white for red Delete button */
  }

  /* --- Prevent disabled color fade for instance buttons --- */
.inst-btn:disabled {
    opacity: 0.8;
    pointer-events: none;
    filter: none;
    background-color: inherit;
    color: inherit;
    border-color: inherit;
}

  /* --- Delete button appearance when deleting --- */
.inst-btn.inst-danger[aria-disabled="true"] {
    background-color: #000 !important;   /* solid black background */
    color: #fff !important;              /* white text */
    border-color: #000 !important;       /* match border */
}

/* Instances: client name above id */
.inst-client-name {
    font-weight: 600;
    color: #555;
}
  
  /* Instances: attached key chip */
.inst-key-chip {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    border: 1px solid #E2E2E2;
    border-radius: 999px;
    font-size: 11px;
    color: #686868;
    background: #FAFAFA;
}