/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: var(--main-bg-color);
    margin: 0;
    font-family: var(--font-family);
    font-size: 14px;
    color: #1e2235;
    line-height: 1.5;
}


/* ─── Top Header ────────────────────────────────────────────── */
.page-header {
    height: 52px;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 15;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.page-header h1,
.page-header h1 a,
.page-header h1 a:visited,
.page-header h1 a:active {
    font-size: 16pt;
    padding-top: 10px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
}


/* ─── Navbar ────────────────────────────────────────────────── */
.nav-header {
    width: 100%;
    background-color: var(--navbar-bg2-color);
    height: 52px;
    display: flex;
    align-items: center;
}

.nav-header > ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    list-style: none;
}

.nav-header > ul > li {
    float: left;
    position: relative;
    height: 52px;
    display: flex;
    align-items: center;
}

.nav-header > ul::after {
    content: "";
    display: block;
    clear: both;
}

.nav-header li { list-style-type: none; }

.nav-header li:hover .submenu {
    display: block;
    position: absolute;
    top: 52px;
    left: 0;
    padding: 6px 0;
    z-index: 100;
    min-width: 200px;
    background-color: #252a40;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.nav-header a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.nav-header > ul > li > a {
    padding: 0 18px;
    color: var(--navbar-text-color);
    height: 52px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 4px;
}

.nav-header > ul > li > a:hover,
.nav-header > ul > li:hover > a {
    background-color: var(--navbar-accent-trans);
    color: #ffffff;
}

.nav-header > ul > li > a img,
.menu-header > div img {
    filter: brightness(0.85);
    transition: filter 0.2s;
}

.nav-header > ul > li > a:hover img,
.nav-header > ul > li:hover > div img,
.menu-header:hover > div img {
    filter: brightness(1.2);
}

.menu-image-header > a {
    padding: 0 14px !important;
}

.submenulink {
    padding: 10px 20px !important;
}

.menu-header > div {
    padding: 0 14px;
    height: 52px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.menu-header:hover > div {
    background-color: var(--navbar-accent-trans);
}

.menu-header .submenu {
    background-color: #252a40;
}

.submenu { display: none; }

.submenu li {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.submenu li:last-child { border-bottom: none; }

.submenu li:hover {
    background-color: rgba(108, 99, 255, 0.25);
}

.submenu li a {
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 500;
    color: #c8cce8;
    display: block;
    width: 200px;
    transition: color 0.15s;
}

.submenu li:hover a {
    color: #ffffff;
}

.submenu-filter { background-color: #1e2e22; }
.submenu-manage { background-color: #2a1e35; }

.menu-title {
    float: left;
    position: relative;
    height: 10px;
    padding: 0 18px;
    color: #fff;
    display: flex;
    align-items: center;
}

.menu-header:hover {
    background-color: var(--navbar-accent-trans);
}


/* ─── Page Layout ───────────────────────────────────────────── */
.page-left {
    background-color: var(--page-bg-color);
    margin: 0;
    height: 100%;
    width: 800px;
    position: fixed;
    z-index: 2;
    border-right: 1px solid var(--page-border-color);
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
}

.page-left table { border: 0; border-spacing: 0; }
.page-left td.tpDate { font-weight: 700; }
.page-left table, .page-left tr, .page-left td {
    border-width: 1px;
    margin: 4px;
}

.page-right {
    background-color: var(--main-bg-color);
    margin-left: 820px;
    margin-right: 30px;
    height: 100%;
    width: -webkit-fill-available;
}

.page-right table { border: 0; border-spacing: 0; }
.page-right td.tpDate { font-weight: 700; }
.page-right table, .page-right tr, .page-right td {
    border-width: 1px;
    margin: 4px;
}


/* ─── Right Nav Panel ───────────────────────────────────────── */
.page-nav-right-content {
    background-color: var(--page-bg-color);
    margin-top: 20px;
    margin-right: 0;
    height: 100%;
    width: 600px;
    position: fixed;
    z-index: 2;
    right: 0;
    display: none;
    border-left: 2px solid var(--page-border-color);
    box-shadow: -4px 0 16px rgba(0,0,0,0.10);
}

.nav-tab {
    border-top: 2px solid var(--page-border-color);
    height: 100%;
    position: fixed;
    width: 600px;
    background-color: var(--page-tabcontent-color);
}

.nav-tab-head {
    -webkit-border-horizontal-spacing: 3px;
    -webkit-border-vertical-spacing: 0;
}

.nav-tab-head-selected {
    border-width: 2px 2px 0;
    background-color: var(--navbar-accent);
    border-style: solid;
    border-color: var(--page-border-color);
    padding: 6px 16px 4px;
    color: #fff;
    font-weight: 600;
    border-radius: 6px 6px 0 0;
}

.nav-tab-head-unselected {
    border-width: 2px 2px 0;
    background-color: #fff;
    border-style: solid;
    border-color: var(--page-border-color);
    padding: 6px 16px 4px;
    border-radius: 6px 6px 0 0;
}


/* ─── Page Content ──────────────────────────────────────────── */
.page-content {
    padding-top: 68px;
    padding-right: 16px;
    padding-left: 16px;
    position: absolute;
    z-index: 1;
    width: -webkit-fill-available;
}

.page-content table { border: 0; border-spacing: 0; }
.page-content td.tpDate { font-weight: 700; }
.page-content table, .page-content tr, .page-content td { border-width: 1px; }


/* ─── List Forms ────────────────────────────────────────────── */
.list-form {
    position: fixed;
    z-index: 1;
    background-color: var(--main-bg-color);
    width: -webkit-fill-available;
    border-bottom: 2px solid var(--page-border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 8px 12px;
}

.list-table {
    padding-top: 52px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.content-notlist {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.list-form-alt {
    height: 190px;
    position: fixed;
    z-index: 1;
    background-color: var(--main-bg-color);
    width: -webkit-fill-available;
    border-bottom: 2px solid var(--page-border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.list-table-alt {
    padding-top: 206px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}


/* ─── Form Controls ─────────────────────────────────────────── */
input {
    width: 250px;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 14px;
    color: #1e2235;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

input:focus {
    border-color: var(--navbar-accent);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

input.readonly { background: #f0f2f8; color: #888; }

.biginput { width: 450px; }
.biggerinput { width: 900px; }
.input_checkbox { width: 18px; height: 18px; accent-color: var(--navbar-accent); }

.page-content select {
    width: 250px;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 14px;
    color: #1e2235;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s;
    outline: none;
}

.page-content select:focus {
    border-color: var(--navbar-accent);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

.page-content .bigselect { width: 500px; }

.page-content ul {
    list-style-type: none;
    margin: 5px;
    padding: 5px;
}


/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
    border-radius: 8px;
    border: none;
    color: #1e2235;
    font: 600 13px var(--font-family);
    padding: 8px 14px;
    margin: 3px;
    width: -webkit-fill-available;
    cursor: pointer;
    transition: filter 0.15s, box-shadow 0.15s, transform 0.1s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    letter-spacing: 0.01em;
}

.btn:hover {
    filter: brightness(0.93);
    box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

.btn:active { transform: translateY(0); filter: brightness(0.88); }

.btn_mini {
    border-radius: 8px;
    border: none;
    color: #1e2235;
    font: 600 12px var(--font-family);
    padding: 6px 12px;
    margin: 3px;
    cursor: pointer;
    transition: filter 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

.btn_mini:hover { filter: brightness(0.92); }

.btn_grey    { background: #d1d5db; }
.btn_lgrey   { background: #f3f4f6; }
.btn_blue    { background: #93c5fd; }
.btn_pink    { background: #f9a8d4; }
.btn_red     { background: #fca5a5; }
.btn_green   { background: #86efac; }
.btn_yellow  { background: #fde68a; }
.btn_purple  { background: #c4b5fd; }
.btn_orange  { background: #fed7aa; }

.buttonsmall {
    width: 150px;
    margin-left: 8px;
    border-radius: 8px;
    border: none;
    padding: 7px 12px;
    cursor: pointer;
    font: 600 12px var(--font-family);
}

.buttonList {
    margin: 1px;
    padding: 4px 6px;
    width: -webkit-fill-available;
    font-size: 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.action_form       { text-align: center; }
.action_form_inline { text-align: center; display: inline; }


/* ─── Nav (legacy nav selector) ────────────────────────────── */
nav {
    width: 100%;
    background-color: var(--navbar-bg2-color);
    height: 52px;
}

nav > ul { margin: 0; padding: 0; }
nav > ul > li { float: left; position: relative; height: 52px; }
nav > ul::after { content: ""; display: block; clear: both; }
nav li { list-style-type: none; }

nav li:hover .submenu {
    display: inline-block;
    position: absolute;
    top: 52px;
    left: 0;
    padding: 6px 0;
    z-index: 100;
}

nav a { display: inline-block; text-decoration: none; }

nav > ul > li > a {
    padding: 0 18px;
    color: var(--navbar-text-color);
    height: 52px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s;
}

nav > ul > li:hover a {
    background-color: var(--navbar-accent-trans);
    color: #fff;
}


/* ─── Tables ────────────────────────────────────────────────── */
.tr-one   { background-color: #f8f9fb; }
.tr-two   { background-color: #eef0f5; }

.tr-one-b  { background-color: #d4fae3; }
.tr-two-b  { background-color: #b8f0cd; }
.tr-one-a  { background-color: #f3e8ff; }
.tr-two-a  { background-color: #e9d5ff; }

.tr-head   { background-color: #1e2235; color: #e8eaf6; }
.tr-head-2 { background-color: #3b4264; color: #e8eaf6; }
.tr-dark   { background-color: #4b5563; color: #fff; }

.tr-one-2     { background-color: #f0fdfd; }
.tr-one-sub-1 { background-color: #cbeaea; }
.tr-one-sub-2 { background-color: #e3fafa; }
.tr-two-2     { background-color: #fefdf0; }
.tr-two-sub-1 { background-color: #ede9c8; }
.tr-two-sub-2 { background-color: #fef9da; }


/* ─── Table Cells (status colors) ──────────────────────────── */
.td-blue    { background-color: #bae6fd; }
.td-yellow  { background-color: #fef08a; }
.td-green   { background-color: #bbf7d0; }
.td-orange  { background-color: #fed7aa; }
.td-red     { background-color: #fecaca; }
.td-pink    { background-color: #fbcfe8; }
.td-purple  { background-color: #ddd6fe; }
.td-grey    { background-color: #d1d5db; }
.td-white   { background-color: #ffffff; }

.td-yellow-2 { background-color: #fefce8; }
.td-green-2  { background-color: #dcfce7; }
.td-orange-2 { background-color: #fff7ed; }
.td-red-2    { background-color: #fff1f2; }
.td-pink-2   { background-color: #fdf2f8; }

.td-head-accent-light    { background-color: var(--td-accent-light-bg-color);    color: var(--td-accent-light-text-color); }
.td-head-accent-dark     { background-color: var(--td-accent-dark-bg-color);     color: var(--td-accent-dark-text-color); }
.td-head-accent-internal { background-color: var(--td-accent-internal-bg-color); color: var(--td-accent-internal-text-color); }
.td-head-accent-forward  { background-color: var(--td-accent-forward-bg-color);  color: var(--td-accent-forward-text-color); }

.td-docker-1-1 { background-color: #cae2e6; }
.td-docker-1-2 { background-color: #b4cbcf; }
.td-docker-2-1 { background-color: #ebe4ce; }
.td-docker-2-2 { background-color: #cfcab8; }

.td-docker-status-green-1  { background-color: #6ee7b7; }
.td-docker-status-green-2  { background-color: #9be07b; }
.td-docker-status-red-1    { background-color: #fca5a5; }
.td-docker-status-red-2    { background-color: #ed9182; }
.td-docker-status-yellow-1 { background-color: #fde68a; }
.td-docker-status-yellow-2 { background-color: #ede282; }


/* ─── Pagination ────────────────────────────────────────────── */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 12px 0 24px;
    padding: 0 8px;
}

.pagination li {
    color: #1e2235;
    padding: 5px 12px;
    border: 1.5px solid var(--page-border-color);
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.pagination li.active {
    background-color: var(--navbar-accent);
    color: #ffffff;
    border-color: var(--navbar-accent);
}

.pagination a:hover:not(.active) { background-color: #f0f2ff; border-color: var(--navbar-accent); }


/* ─── Modal ─────────────────────────────────────────────────── */
.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.55);
    z-index: 20;
    backdrop-filter: blur(2px);
}

.close {
    color: #9ca3af;
    float: right;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

.close:hover,
.close:focus { color: #1e2235; }

.modal-header {
    padding: 14px 20px;
    background-color: var(--td-accent-dark-bg-color);
    color: var(--td-accent-dark-text-color);
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    border-radius: 12px 12px 0 0;
}

.modal-body { padding: 16px 20px; }

.modal-footer {
    padding: 12px 20px;
    background-color: #f8f9fb;
    border-top: 1px solid var(--page-border-color);
    border-radius: 0 0 12px 12px;
    color: #4b5563;
}

.modal-content {
    position: relative;
    background-color: #ffffff;
    margin: 6% auto;
    padding: 0;
    width: 42vw;
    height: min-content;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
}


/* ─── Scroll Divs ───────────────────────────────────────────── */
.scrolldiv-types {
    overflow: scroll;
    overflow-x: hidden;
    height: calc(100% - 270px);
}

.scrolldiv-customer {
    overflow: scroll;
    overflow-x: hidden;
    height: 600px;
}

.scrolldiv-user {
    overflow: scroll;
    overflow-x: hidden;
    height: 600px;
}


/* ─── Left / Right Trigger Panels ───────────────────────────── */
.trigger-image {
    display: block;
}

.left-trigger {
    position: fixed;
    left: 0;
    z-index: 13;
    top: 40%;
    height: 80px;
    background-color: var(--navbar-accent);
    width: 18px;
    border-radius: 0 40px 40px 0;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s, width 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-trigger:hover { opacity: 1; width: 22px; }

.left-trigger-up {
    position: fixed;
    left: 610px;
    display: none;
    z-index: 15;
    top: 40%;
    height: 80px;
    background-color: var(--navbar-accent);
    width: 18px;
    border-radius: 0 40px 40px 0;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s;
    align-items: center;
    justify-content: center;
}

.left-trigger-up:hover { opacity: 1; }

.page-nav-left-content {
    background-color: var(--page-bg-color);
    top: 52px;
    margin-top: 0;
    margin-left: 0;
    padding: 16px;
    height: calc(100% - 52px);
    width: 610px;
    position: fixed;
    z-index: 14;
    left: 0;
    display: none;
    border-right: 2px solid var(--page-border-color);
    box-shadow: 4px 0 20px rgba(0,0,0,0.12);
    overflow-y: auto;
}


/* ─── Status / Special Classes ───────────────────────────────── */
.expert-user { background-color: #bbf7d0; }

.td-closed            { background-color: #d1d5db; }
.td-received          { background-color: #bae6fd; }
.td-in-progress       { background-color: #fde68a; }
.td-waiting-customer  { background-color: #fbcfe8; }
.td-waiting-support   { background-color: #ddd6fe; }
.td-responded         { background-color: #bbf7d0; }
.td-historized        { background-color: #e5e7eb; }

.td-msgnb-ok      { background-color: #bbf7d0; }
.td-msgnb-warning { background-color: #fde68a; }
.td-msgnb-ko      { background-color: #fecaca; }

.td-closing-comment { background-color: #f3f4f6; }
.td-comment         { background-color: #fefce8; }
.td-idontknow       { background-color: #e5e7eb; }
.td-timestop        { background-color: #fca5a5; }
.td-first-timestop  { background-color: #fed7aa; }

.td-wait-ok      { background-color: #bbf7d0; }
.td-wait-warning { background-color: #fde68a; }
.td-wait-ko      { background-color: #fecaca; }
.td-wait-fatal   { background-color: #c4b5fd; }

.td-fraud-0 { background-color: #ffffff; }
.td-fraud-1 { background-color: #fde68a; }
.td-fraud-2 { background-color: #fed7aa; }
.td-fraud-3 { background-color: #fecaca; }


/* ─── File Upload ───────────────────────────────────────────── */
.custom-file-upload { cursor: pointer; }
.hide_file { display: none; }


/* ─── Text truncation ───────────────────────────────────────── */
.td_nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: initial;
}

option:disabled { color: #fca5a5; }