/* generics */
:root {
    --bs-font-family: "Inter", sans-serif;
    --bs-border-radius: 4px;
}

html, body {width: 100%;  font-family: 'Inter', sans-serif; font-size: 14px}
body {overflow-x: hidden; overflow-y: scroll; padding: 0; margin: 0; background: #fcfcfc;

    /*
    background-image: url("../img/bkg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-blend-mode: color;
    */
}
a {text-decoration: none;}
h1 {font-size: 18px; color: rgb(11, 14, 20); font-weight: 600; }
h2 {font-size: 17px;}


body.modal-open header .dropdown {margin-right: 15px}

/* swup */
/*
.transition-main {transition-property:opacity,transform;transition-duration:250ms;transition-timing-function:cubic-bezier(.77,0,.175,1);transform:translateX(0);opacity:1}
html.is-animating .transition-main, html.is-animating.to-left .transition-main {opacity:0}
html.is-animating .transition-main {transform:translateX(-1em)}
html.is-animating.to-left .transition-main {transform:translateX(1em)}
*/
.swup-progress-bar {height: 1px; background-color: violet;}

.logo {font-family: 'Inter', sans-serif; font-size: 24px;}
.logo img {height: 38px; margin-right: 4px; position: relative; top: -2px;}


/* utils */
@media (min-width: 992px) { .fs-lg-2 { font-size: 1.75rem !important; } }
.fs-larger {font-size: larger;}
.img-avatar {width: 40px!important; height: 40px!important; object-fit: cover; border-radius: 50%; }
.img-avatar-sm {width: 30px!important; height: 30px!important;}
.min  {width: 10px; white-space: nowrap;}
.nowrap {white-space: nowrap!important;}
th.left, td.left  {text-align: left;}
th.center, td.center  {text-align: center;}
th.right, td.right  {text-align: right;}
.ucfirst::first-letter {text-transform: uppercase}
.upper, .uppercase {text-transform: uppercase}
.lower, .lowercase {text-transform: lowercase}


/* forms */
.form-control {padding: .3rem .5rem; border-radius: 0}
.form-select {border-radius: 0; padding: .3rem .5rem;}
textarea.form-control {min-height: 80px;}
textarea.code {
    font-family: monospace !important;
    font-size: 12px;
    line-height: 1.5;
    tab-size: 2;
    resize: vertical;
}

.badge {font-weight: 400; vertical-align: middle;}
.input-password-wrapper {position: relative; display: inline-block; /*width: 100%;*/}
.input-password-toggle {padding-right: 40px;}

.btn-toggle-password {
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #6c757d;
    font-size: 1.2rem;
}

.btn-toggle-password:hover {color: #000;}

.modal-header, .modal-footer {border: 0}
.modal-dialog-scrollable .modal-body {overflow-x: hidden;}
.modal-body {padding-top: 0}

.modal-error .modal-body {min-height: 100px}

.form-check-input, .form-select {cursor: pointer;}

input::placeholder {color: #ccc!important;}
input[type="date"]:placeholder-shown, input[type="datetime-local"]:placeholder-shown, input[type="time"]:placeholder-shown
    {color: #ccc!important;}

input[type=search] {
    padding-left: 30px!important;

    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23676a6d' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
    */
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 24 24"><path d="M 10 2 C 5.5965257 2 2 5.5965291 2 10 C 2 14.403471 5.5965257 18 10 18 C 11.752132 18 13.370523 17.422074 14.691406 16.458984 L 19.845703 21.613281 A 1.250125 1.250125 0 1 0 21.613281 19.845703 L 16.458984 14.691406 C 17.422074 13.370523 18 11.75213 18 10 C 18 5.5965291 14.403474 2 10 2 z M 10 4.5 C 13.052375 4.5 15.5 6.947627 15.5 10 C 15.5 13.052373 13.052375 15.5 10 15.5 C 6.9476251 15.5 4.5 13.052373 4.5 10 C 4.5 6.947627 6.9476251 4.5 10 4.5 z"></path></svg>');

    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 16px;
}

input[type=search].is-invalid {
    /*
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23676a6d' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E")!important;
     */

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 24 24"><path d="M 10 2 C 5.5965257 2 2 5.5965291 2 10 C 2 14.403471 5.5965257 18 10 18 C 11.752132 18 13.370523 17.422074 14.691406 16.458984 L 19.845703 21.613281 A 1.250125 1.250125 0 1 0 21.613281 19.845703 L 16.458984 14.691406 C 17.422074 13.370523 18 11.75213 18 10 C 18 5.5965291 14.403474 2 10 2 z M 10 4.5 C 13.052375 4.5 15.5 6.947627 15.5 10 C 15.5 13.052373 13.052375 15.5 10 15.5 C 6.9476251 15.5 4.5 13.052373 4.5 10 C 4.5 6.947627 6.9476251 4.5 10 4.5 z"></path></svg>');
    background-repeat: no-repeat!important;
    background-position: 8px center!important;
    background-size: 16px!important;
}


input[type='number'] {width: 150px; text-align: center;}
input[type='date'] {max-width: 150px; text-align: center;}
input[type='time'] {max-width: 150px; text-align: center;}
input[type='tel'] {max-width: 200px;}

.input-group .btn {line-height: normal; height: 32px;}
.input-group .input-group-text {line-height: normal; height: 31.5px;}
.input-group .btn.border {height: 31px;}


.dropzone-image {height: 100px; overflow: hidden; border:2px dotted #ccc; margin-bottom: 5px}
.dropzone-image:hover {border-color:#000; cursor: pointer;}
.dropzone-image img {max-width: 100%; max-height: 100%;}


/* select 2 */
.select2-search--dropdown .select2-search__field {padding: 2px;}
.select2-container--default .select2-selection--single {border-radius: 0}
.select2-selection {border-color: rgb(222, 226, 230)!important;}
.select2 {margin-bottom: 6px; width: 100%!important;}
.select2-container .select2-selection--single {height: 32px; padding-top: 2px!important; padding-left: 3px!important;}
.select2-search__field {outline: none; border-color: rgb(222, 226, 230)!important;}
.select2-container--default .select2-selection--single .select2-selection__arrow {right: 7px;}
select.is-invalid + .select2 .select2-selection {border-color: #dc3545!important;}
.select2-container--default .select2-selection--single .select2-selection__clear {left: -10px; top: -3px; font-weight: 300;}
.select2-container--default .select2-search--inline .select2-search__field {padding-left: 5px!important;}

.select2-container--default .select2-selection--multiple .select2-selection__choice {font-size: 11px}

.input-group .select2 {width: 80%!important;}
.select2-results__option[aria-disabled="true"] {display:none!important;}

/* nav */
.nav-pills .nav-link {font-size:15px; color: #000; border-radius: 0!important; padding-bottom: 15px; }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {font-weight: bold; background-color: transparent; color: var(--bs-primary); border-bottom: 2px solid var(--bs-primary);}


/*== interface ==*/
.app-header { height: 55px; background: #fff; z-index: 1030; position: fixed }
.app-header > .container-fluid { height: 100%; }
.app-header .d-flex { height: 100%; }
.app-header a { height: 100%; display: flex; align-items: center; }
.app-header img { height: 100%; width: auto; object-fit: contain; max-width: 100%; }

.app-header-end {white-space: nowrap; display: flex; align-items: center; gap: 10px}
.app-header-end a.app-header--icon {font-size: 28px; color: #666; margin-right: 8px}
.app-header-end a.app-header--icon:hover {color: #000}
.app-header-btn-task-badge {position: absolute; bottom: 0; right: -5px; width: 16px; height: 16px; padding: 0; background-color: #ffc107; color: #000; border-radius: 50%; font-size: 9px; font-weight: 300; line-height: 16px; text-align: center;}


.app-menu {top: 55px; position: fixed; z-index: 1001;}
.app-menu ul {margin: 0; padding: 0; list-style: none;}
.app-menu .category {list-style: none;}

.app-menu .category a {width: 50px; display: block; text-align: center; text-decoration: none; padding: 6px 4px; }
.app-menu .category i {color: #999; opacity: 1; font-size: 22px}

.app-menu .category:hover > a {background: var(--hover-bg, #000);}
.app-menu .category:hover > a > i {color: #fff;}


.app-menu .category:hover i {opacity: 1;}
.app-menu .category:hover ul {display: block;}

.app-menu .category ul {margin: 0; list-style: none; position: fixed; z-index: 999999; top: 55px; left: 50px; min-width: 350px; background: #f5f6fa; bottom: 0; padding: 15px 0px; display: none;}
.app-menu .category ul li.category-title {font-size:13px; letter-spacing: 1px; color: #000; padding: 0 25px; text-transform: uppercase; margin-bottom: 10px}
.app-menu .category ul li {}
.app-menu .category ul li a {width: 100%; padding: 5px 25px; text-align: left; color: #666; white-space: nowrap; margin: 0px;}
.app-menu .category ul li a:hover {color: #000; background: #e7eaf0; }
.app-menu .category ul li i {color: #666; font-size: 16px; margin-right: 5px;}

.app-main {margin-left:50px; width:calc(100vw - 75px); margin-top: 90px; min-height: calc(100vh - 150px);}
h1.main-fixed {position: fixed;  width: 100vw; z-index: 10; left: 50px; top: 55px; background: #fafafa; padding-left:10px; padding-top: 15px; padding-bottom: 15px; border-bottom:1px solid #e5e5e5;}

.dashboard-wrapper {margin-top: -40px!important;}


.dropdown-menu {min-width: 200px; border-radius: 0;}
.min-w-auto {min-width: auto}
.dropdown-divider {opacity: 0.2}

.row-hover:hover {background-color: #f5f5f5;}


/* color editor */
.CodeMirror {font-size: 12px; height: 500px}
textarea.sm + .CodeMirror {height: 300px}
textarea.lg + .CodeMirror {height: 700px}
.CodeMirror .cm-comment {background-color: black; color: lightgreen!important; font-weight: bold!important;}
.CodeMirror-fullscreen-button {position: absolute; z-index: 1; margin-top: 10px; right: 20px;}

/* auth */
.card-login {max-width: 400px; margin-top: -150px;}


/* top-search */
.top-search {position: fixed; z-index: 1050; top:10px; width: 400px; left: calc(50vw - (450px / 2) - 10px); opacity: 0.5}
.top-search:focus-within, .top-search:hover {opacity: 1}
.top-search input {border-color: transparent; width: 100%!important; padding-right: 75px; cursor: pointer;}
.top-search-kbd {position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; color: #666; background-color: #f3f4f6; border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 6px; pointer-events: none; font-family: inherit; line-height: 1;}

/* top-search backdrop */
.top-search-backdrop {position: fixed; inset: 0; z-index: 1080; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 20px 16px 24px; overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.12s;}
.top-search-backdrop.is-open {visibility: visible; opacity: 1; pointer-events: auto;}
.top-search-panel {max-width: 720px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); overflow: hidden;}
.top-search-panel-input {position: relative; display: flex; align-items: center; border-bottom: 1px solid #eef0f2;}
.top-search-panel-icon {position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: #6b7280; pointer-events: none;}
.top-search-panel-input input {border: 0!important; box-shadow: none!important; height: 60px; font-size: 1.05rem; padding-left: 52px!important; padding-right: 60px!important; background: transparent;}
.top-search-panel-input input:focus {outline: none;}
.top-search-panel-close {position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #6b7280; padding: 6px 10px;}
.top-search-panel-close:hover {color: #111;}
.top-search-panel-results {max-height: 60vh; overflow-y: auto;}
.top-search-panel-results:empty {display: none;}
.top-search-section {padding: 6px 0;}
.top-search-section + .top-search-section {border-top: 1px solid #f1f3f5;}
.top-search-section-head {display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 6px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; font-weight: 600;}
.top-search-section-head i {margin-right: 6px;}
.top-search-section-more {font-size: 0.75rem; color: #2563eb; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;}
.top-search-section-more:hover {text-decoration: underline;}
.top-search-section-more .badge {background: #2563eb; color: #fff; font-weight: 600; border-radius: 999px; padding: 2px 8px; font-size: 0.7rem;}
.top-search-item {display: flex; align-items: center; gap: 12px; padding: 10px 18px; text-decoration: none; color: #111; transition: background 0.12s;}
.top-search-item:hover, .top-search-item.is-active {background: #f3f4f6; color: #111;}
.top-search-item-body {min-width: 0; flex: 1;}
.top-search-item-label {font-weight: 500; line-height: 1.2;}
.top-search-item-sub {font-size: 0.8rem; color: #6b7280; line-height: 1.2; margin-top: 2px;}
.top-search-item-badge {font-size: 0.7rem; font-weight: 600; padding: 4px 8px; text-transform: capitalize; flex-shrink: 0;}
.top-search-item-arrow {color: #9ca3af; font-size: 0.9rem; flex-shrink: 0;}
.top-search-panel-menu {display: none;}

@media (max-width: 768px) {
    .top-search-panel {border-radius: 8px;}
    .top-search-panel-input input {height: 52px; font-size: 1rem;}
    .top-search-panel-results {max-height: 65vh;}
}

/* link-tuile */
.link-tuile {min-width: 250px; height: auto; display: inline-block; border-radius: 4px; border: 1px solid #e5e5e5; text-align: center; margin-right: 10px; padding: 15px 10px; color: #333;}
.link-tuile i {font-size:24px}
.link-tuile:hover {background: var(--bs-primary); border-color: var(--bs-primary); color: white;}

.widget-bookmarks .link-tuile {min-width: 150px; height: 100px; padding: 10px;}
.widget-bookmarks .link-tuile i {font-size: 20px}

.popover-bookmarks { max-width:none; }
.popover-bookmarks .popover-body { padding:8px; }
.popover-bookmarks .link-tuile { min-width:120px; width:120px; height:100px; padding:10px 5px; margin:0; font-size:12px; }
.popover-bookmarks .link-tuile i { font-size:24px; }


[data-sortable="true"] > * i:hover {cursor: move}

/* form */
.form-header-buttons {position:fixed; top: 65px; right:15px; text-align: right; z-index: 1020; }
body.modal-open .form-header-buttons {margin-right: 15px;}

.datagrid-toolbar-top-wrapper {position:fixed; top: 65px; right:0px; text-align: right; z-index: 1020; width: auto;}
body.modal-open .datagrid-toolbar-top-wrapper {margin-right: 15px;}

.cockpit-btn:hover { background: #f8f9fa !important;}

/* avatar separator (desktop only) */
@media (min-width: 992px)
{
    .app-header-avatar { border-left: 1px solid #e5e5e5; padding-left: .75rem; margin-left: .5rem; }
}

/* widget-day: hero greeting + upcoming events */
.widget-day .widget-day-row { background: #f6f4ef; }
.widget-day-hero { min-width: 200px; }
.widget-day-body { min-width: 0; }
.widget-day-empty { background: #fff; border-radius: .5rem; }
.widget-day-time { background: #fce8e6; min-width: 110px; text-align: center; }
.widget-day-main { background: #fff; border-radius: .5rem; min-width: 220px; }
.widget-day-main:hover { background: #fafafa; }
.widget-day-mini { background: #fff; border-radius: .5rem; min-width: 150px; max-width: 200px; }
.widget-day-mini:hover { background: #fafafa; }
.widget-day-extra,
.widget-day-action { color: #0d6efd; min-width: 100px; }
.widget-day-extra:hover,
.widget-day-action:hover { color: #0a58ca; }
.widget-day-category { color: #a33a8e; letter-spacing: .5px; }

/* live state */
.widget-day-live .widget-day-time { background: #fde2e2; }
.widget-day-live-badge { color: #dc3545; display: inline-flex; align-items: center; gap: .3rem; }
.widget-day-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc3545; display: inline-block; animation: widget-day-live-pulse 1.4s ease-in-out infinite; }
@keyframes widget-day-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* far state (>1h) */
.widget-day-far .widget-day-time { background: #dbeafe; }
.widget-day-far .widget-day-category { color: #0d6efd; }

/* day over state */
.widget-day-over .widget-day-time { background: #eef2f7; }

/* mobile: stack everything */
@media (max-width: 767px)
{
    .widget-day .widget-day-row { flex-direction: column; }
    .widget-day-hero { width: 100%; padding-bottom: .25rem !important; }
    .widget-day-body { width: 100%; flex-direction: column; gap: .5rem !important; }
    .widget-day-empty,
    .widget-day-main,
    .widget-day-mini,
    .widget-day-time,
    .widget-day-action,
    .widget-day-extra { width: 100%; max-width: 100%; min-width: 0; }
    .widget-day-time { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: .5rem 1rem !important; text-align: left; }
    .widget-day-time > div { text-align: left; }
    .widget-day-action,
    .widget-day-extra { justify-content: center !important; padding: .75rem !important; background: #fff; border-radius: .5rem; }
}

.cockpit-stat { transition: background .15s, color .15s, border-color .15s; }
.cockpit-stat:hover { background: #f8f9fa !important; border-color: #999 !important; }


/* activities offcanvas trigger */
.btn-activities-trigger {display:none; position:fixed; right:0; top:20vh; transform:translateY(-50%); z-index:1999; border-radius:.375rem 0 0 .375rem;}
#offcanvasActivities {width:80vw; max-width: 800px; z-index:2000;}
#offcanvasActivities:not(.showing) {transition:none !important;}
#offcanvasActivities ~ .offcanvas-backdrop {z-index:1999;}

/* time select */
select.time-select {text-align: center;}
select.time-select option {text-align: center;}

.fetcher-modal {z-index: 3000;}