/* Basic Elements: START */
.ad-basic-card{    border-radius: 10px !important;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;padding:25px 15px 25px 15px;background-color:#fff;}

    /* texts: */
    .text-error{color:rgb(235, 68, 68);}
    .text-success{color:#09ae16;}
/* Basic Elements: END */
.width-100{width:100%}
.padding-10 {padding:10px;}
.padding-5 {padding:5px;}
.padding-0 {padding: 0px !important;;}
.margin-5{margin: 5px !important;}
.margin-left-5{margin-left: 10px;}
.margin-left-10{margin-left: 10px;}
.margin-left-15{margin-left: 15px !important;}
.margin-left-30{margin-left: 30px;}
.margin-left-60{margin-left: 60px;}

.margin-top-5{margin-top: 5px;}
.margin-top-7{margin-top:7px;}
.margin-top-10{margin-top:10px;}
.margin-top-20{margin-top: 20px;}
.margin-top-25{margin-top: 25px;}
.margin-top-50{margin-top: 50px;}
.margin-top-60{margin-top: 60px;}

.margin-bottom-5{margin-bottom: 5px;}
.margin-bottom-20{margin-bottom: 20px;}
.margin-bottom-25{margin-bottom: 25px;}
.margin-bottom-40{margin-bottom: 40px;}

.margin-right-5{margin-right:5px;}
.margin-right-10{margin-right:10px;}
.margin-right-25{margin-right:25px;}
.margin-right-35{margin-right:35px;}


.logo-default{margin:10px 0px 0px 20px !important; max-width: 145px;}
.error-border{border-color:red; border-width:1px; border-style:solid;}

.marketing-list{list-style-type: none; margin:0px; padding:0px;}
.marketing-list li{margin:4px 0px;}
.marketing-list img{width:20px;}

.personalize-2 select{
    width: auto !important;
    min-width: 400px;
    max-width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-gift{width:45px;}
.width-80{
    width:80%;
}

.link{color:#337ab7; cursor:pointer;}
.link:hover{text-decoration:underline;}

.general-alert{z-index:11111; width:100%; position:fixed;max-height: 700px;    overflow: auto;}

.width100{width:100%}
.products-tag-search-edit-section{ position: absolute; top: -28px; background-color: white; width: 435px;  z-index: 2000; right: 134px;}

.bold{font-weight:bold;}
.center{text-align:center;}
.align-center{vertical-align:middle;}
.red{color:red;}
.blue{color:blue;}
.orange{background-color:#f4802f}
.background-gold{background-color:gold;}
.float-left{float:left;}
.float-right{float:right;}
.background-red{background-color:red !important;}
.background-purple{background-color:#8a2be2a1}
.light-background-red{background-color:#f4c1c1 !important;}
.green{background-color:green !important; border-color:green !important; }
.font-white{color:#ffffff;}
.ul-remove-decoration{list-style-type: none;}
.clear{clear:both;}
.block{display:block;}
.underline{text-decoration:underline;}
.decoration-none{text-decoration:none !important;}
.pointer{cursor:pointer}
.display-none,.hide-selected-user-name{display:none;}
.print-gift-card-preview-continer{
    font-family: 'Dancing Script', cursive;
    line-height: 20px;
    width: 75mm;
    height: 120mm;
    vertical-align: top;
    text-align: center;
    padding: 40px;
    background-clip: content-box;
    background-color: #fef5f5;
}
.color-black{color:#000;}

.break-word{
    overflow-wrap: break-word;
    text-align: center;
    white-space: normal !important;
}

/* US MANUFACTURE ADJUSTMENT */
.us-manufacture-color-bg{background:#82bcaf}

.font-weight-600{font-weight:600;}

.filter_factory_product.selected{color:white !important;font-weight:bold;background-color:#3598dc !important;}
.filter_factory_product_status.selected{color:white !important;font-weight:bold;background-color:#3598dc !important;}

.factory-product-card-wrapper{padding:10px; }
.flex-container{flex-wrap:wrap;display:flex;justify-content: space-between;}
.flex-1{flex:1}.flex-2{flex:2}.flex-3{flex:3}.flex-4{flex:4}.flex-5{flex:5}.flex-6{flex:6}.flex-7{flex:7}
.flex-1-3{flex: 1 1 calc(33.333% - 10px)}
.factory-product-card-item{
    align-self: center;
    padding : 10px;
}
.height-100 {
    height: 100%;
}
.factory_btn{
    border-radius: 10px !important;
    margin:auto;
}
.print-gift-card-preview-continer.print-mode{
    float: left;
    background-color: transparent;
	    position: relative;
}
.identifier-img{
    width: 20px;
    margin:auto;
}
.bg-perfilove{
    background:#b0ff9e !important;
}
.bg-light-pink{
    background:#e8acacb8 !important;
}
.bg-orange{
    background: #f1bc8845 !important;
}
.bg-light-blue{
    background:#abdeeab8 !important;
}
.bg-white{background:#fff !important;}
.bg-light-green{
    background:#0080004d !important;
}
.bg-light-green:hover {
    background: #0080002e !important;
}
.bg_gold_plated{
    background: #eac37c;
}
.bg_rose_gold{
    background: #ffb6a2;
}
.bg_gold{
    background: #eac37c;
}
.bg_white_gold{
    background: #d1d1d1;
}
.bg_stainless_steel{
    background: #96c3cc;
}
.bg-stainless-steel-cut{
    background: #d6aeef;
}
.padding-tb-5{
    padding: 5px 0;
}
#manufacture-by-date-table td.sorting_1{
    background: rgb(255 255 255 / 0%) !important;
}

.switch-auto-graphics-status{
    border: 1px solid black !important;
}
.portlet-title.bg-orange {
    display: flex;
    align-items: center; 
} 

.portlet-title.bg-light-green {
    display: flex;
    align-items: center; 
} 

.priview-id{
	position: absolute;
    bottom: 14px;
    transform: rotate(90deg);
    left: 278px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 7px;
}

.print-gift-card-preview-continer.print-mode .priview-id{
     left: 303px;
    bottom: 40px;
}

.print-gift-outsider-flat{
    height: 100%;
    width: 101.1mm;
}
.print-gift-outsider-flat-secend{
     height: 10mm;
    width: 111mm;
}

.height-auto{
    height:auto;
}

.print-gift-card-preview-print-warper{    height: 297mm;
    width: 214mm;}
   
.print-gift-card-preview-helper {    border: 2px solid #000;}
.print-gift-card-preview{ 		padding: 0px 30px;    margin: 0 auto;}
.fs10{font-size: 10px;}
.fs11{font-size: 11px;}
.fs12{font-size: 12px;}
.fs14{font-size: 14px;}
.fs16{font-size: 16px!important;}
.fs18{font-size: 18px!important;}
.fs20{font-size: 20px;}
.fs25{font-size: 25px;}
.fs35{font-size: 35px;}
.fs50{font-size: 50px;}
.op-gold-weight-input-qa{
    display: inline !important;
    border:0px !important;
    background: white !important;
}
.tmp{
    width:50%; display:inline-block
}

.vl {
    border-right: 1px solid black;
    padding: 5px;
}

.margin-18{
    margin:18px;
}
.margin-10{
    margin:10px;
}

@media (min-width: 1024px){
    #qa-order-modal .modal-dialog {
        width: 1500px;
        max-width: 95%;
    }    
}

.qa_selected_row{
    border: black 3px solid !important;
}
.qa-image{
    width: -webkit-fill-available;
}

.send-me-product-pic{
    border: 2px solid;
    padding: 10px;
    border-color: red;
}

.product-board{
    border: black 1px solid;
    padding: 1px;
    margin-bottom: 15px;
}

.items-center{
    display: flex;
    align-items: center;
    justify-content: center;
}

.multiple-order-product{
    position: sticky;
    z-index: 2;
    top: 10px;
    height: max-content;
}
.qa-change-manufacturer-status-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
    background:#43b843;
    color:white;
}

.qa-info-section{
    height: 50px;
    display: flex;
    letter-spacing: 1.5px;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.qa-title-section{
    font-size: 16px;
    letter-spacing: 2px !important;
}

.pulse_animmation {
	margin: 10px;
	height: 20px;
	width: 20px;

	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 1s infinite;
}

.pulsate {
	box-shadow: 0 0 0 0 rgb(175, 59, 59);
	transform: scale(1);
	animation: pulse 1s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

.statistics-dashbord-card{
    border-radius: 10px !important;
    height: 280px;
}
.statistics-dashbord-cube{
    border-radius: 10px !important;
    height: 135px;
}
.statistics-dashbord-strip{
    border-radius: 10px !important;
    height: 35px;
}
.statistics-dashbord-vacation{
    border-radius: 10px !important;
    height: 185px;
}
.apexcharts-menu-icon{
    display: none;
}
.today-vacations-border{
    border: 2px solid;
    padding: 3px;
}

.manufacturer-image{width:50px;}
.total-price-outsider{  position: fixed;  top: 0;  margin-top: 59px; right: 0;  background-color: rgba(87, 142, 190, 0.8);  width: 100%; height: 58px;}
.order-product{width:65px; height:65px;}
.category-select-width{width:248px;}
.container-checkbox { border:2px solid #ccc;  height: 350px; overflow-y: scroll; }

.has-spinner .fa-spinner {
    opacity: 0;
    max-width: 0;

    -webkit-transition: opacity 0.25s, max-width 0.45s;
    -moz-transition: opacity 0.25s, max-width 0.45s;
    -o-transition: opacity 0.25s, max-width 0.45s;
    transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

.loading-payment{    height: 200px;    width: 200px;    position: fixed;    left: 39%;    z-index: 11; top:50%;}
.chart-legend{	height: 30px;    width: 30px;    float: left;}
.chart-legend-name{	height: 30px;    width: 60px;    float: left;}

.special-for-you-title{    position: relative; top: 13px;    font-family: 'Dancing Script', cursive;}

.has-spinner.active .fa-spinner {
    opacity: 1;
    max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}

.close-btn{ float: right;cursor: pointer; padding: 1px 2px 1px 12px;}
.radio-child div{padding:0px !important;}

.manufacturer-popup{width: 300px; position: absolute; background-color: white; border: 1px solid;    padding: 3px; display: none;z-index: 1;}
.dropdown-menu>li>span{padding: 8px 16px;}
.ul-fixed-position{ position: fixed;  top: 23px;   z-index: 10000;  left: 700px;padding:0px;}


@media (max-width: 1400px) {
    .hidden-1400{display: none;}
}
@media screen and (max-width: 767px) and (min-width: 0px){
    .ul-fixed-position{position: initial;top: 0;z-index: none;left: 0;padding: 0;}
    .dropdown-menu{    position: relative;}
}

.in-proudct-img-cube{	position: relative;    bottom: 40px;    text-align: center;    margin: 0 auto;    width: 110px;}
.in-product-input{width: 30px;float:left;height: 33px;text-align: center;margin-right:10px;}
#search-specs-by-id-btn{padding:1.5px 10px; border-radius: 1px; border:1px solid yellowgreen;}
.amazon-spcification-data pre{font-size: 16px;}

@font-face {
	font-family: 'Braille Normal';
	src: url('https://s3.amazonaws.com/onecklace/fonts/BrailleNormal.woff') format('woff');
}

.braille-letters{
	font-family: 'Braille Normal';
}

.product-tag-obj{padding:5px;font-size: 1.5em;border-radius:10px !important;}
.x-remove-product-tag{color:red;}
#add-new-tag{background: #47c4ff;height: 30px;border-radius: 5px !important;};
.qa-check-textarea{width: 200px;}
.qa-check-element{margin-top: 10px !important;}
.qa-check-table .qa-info{text-align: left;}

.live-search-li:hover{background-color: #EAF0F3;}
.edit-order-menu{    max-height: 500px;    overflow: auto;}
.change-gift-card-info{width:50px;    margin-right: 10px;}

.product-specification-content{cursor:pointer;}
.gold-beckground{    background: #e5e50e !important;}
.white_gold-beckground{    background: #a9a996  !important;}
.priority-background-1{background-color:rgba(255, 0, 0, 0.703) !important;}

.happyfox-communications-line{max-height: 200px; overflow:auto;}
.client-lodding-message{display:none;}
.draw-close-btn {    background: #000;      height: 12px;      position: absolute;      width: 2px; transform: rotate(45deg); right: 5px; }
.draw-close-btn:after { background: #000;      content: "";      height: 2px;      left: -5px;      position: absolute;      top: 5px;      width: 12px;    }

.external-images a{    display: inline-block;}
.external-images{    position: relative;}

#internal-product-graphic-comment-modal{margin-top:50px;}
.internal-product-graphic-comment-container{position: relative;}
.internal-product-graphic-comment-container .button-container{  margin-top:70px;}
.internal-product-graphic-comment-text{      bottom: 27px;  direction: rtl; background: #fff;padding: 5px;width: 200px;border: 2px solid;position: absolute;margin-top: 15px;z-index: 1;left: -66%;}
.internal-product-graphic-comment-text div{position: relative;}
.internal-product-graphic-comment-text:before {content: "";position: absolute;bottom: -12px;border: solid 6px transparent;border-top-color: #000;z-index: 1;left: 0;right: 0;width: 2px;margin: 0 auto;}
.edit-product-tr .internal-product-graphic-comment-text{    left: -20%;}

#product_graphic_comment{direction: rtl;}
.not_personalize_red_class{border-color: #7d1010 !important;background-color: #7d1010 !important;}
.op-manufacturer-board-name-input{display: block;width: 80px;text-align: center;background: transparent;margin-top: 16px;margin: 0 auto; border:1px solid #000;}
.op-gold-weight-input{display: block;width: 80px;text-align: center;background: transparent;margin-top: 16px;margin: 0 auto; border:1px solid #000;}
.invisible-editable-input{display: block;width: 80px;text-align: center;background: transparent;margin-top: 16px;margin: 0 auto; border:1px solid #000;}

.tooltip_cs {position: relative;display: inline-block;}
.tooltip_cs .tooltiptext_cs {visibility: hidden;width: 120px;background-color: rgb(140, 139, 139);color: #fff;text-align: center;padding: 5px 0;border-radius: 12px;position: absolute;z-index: 1;}
.tooltip_cs:hover .tooltiptext_cs {visibility: visible;}

/*
   Product Edit main Category section 
*/
.main-category-of-product-style{margin-left:15px; cursor:pointer;text-decoration: underline;}
.primary-category-for-product{font-weight: bold;font-weight: 20px;}
.secondory-category-for-product{}
.diamond-manifacturer-background{background:#46ffc8 !important;}


.accordion {
    width: 100%;
    border: 1px solid #ccc;
}
.accordion-item {
    border-bottom: 1px solid #ccc;
}
.accordion-header {
    background: #f1f1f1;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header::after {
    content: '\25B6'; /* Right arrow */
    transition: transform 0.3s ease;
}
.accordion-content {
    display: none;
    padding: 10px;
    background: #fff;
}
.accordion-item.active .accordion-header::after {
    transform: rotate(90deg);
}

.nested-field{
    /* padding:10px ; */
    background-color: #67809f !important;
}

     #specifications-container {
    max-width: 800px;
    margin: 0 auto;
}
.spec-container {
    box-shadow:0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
    background: white;
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}
.spec-container label {
    font-weight: bold;
}
.spec-container input, .spec-container select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.remove-btn {
    background: red;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
}
.add-btn {
    background: green;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    display: block;
    margin: 10px auto;
    text-align: center;
    font-size: 16px;
}
.specification-ui-card{
    border-radius: 10px !important;
    padding: 10px;
    margin:10px;
    background: #efefef;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;		}

.option-container {
    /* display: flex; */
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}
.option-container input {
    flex: 1;
}
.add-option-btn {
    background: blue;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 5px;
}
#description{min-height: 500px;}
textarea{border-radius: 5px !important;}
/* AI - Generator */

.ai-generator-wrapper{position:relative;}
.ai-variable-key{color:#3ccda2;}
.ai-generator-title{}
.ai-variable-value-marked{color:#3ccda2;font-weight: bold;}
.ai-generator-btn{padding:10px;cursor:pointer;background:#78cfb4;color:#fff;}

.ai-generator-card{background:#fbfbfb;border:#ebe7e7 1px solid;border-radius:15px !important;padding:15px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.ai-generate-prompt-text{border-radius:5px !important;min-height: 300px;}
.ai-generator-drawer{overflow:auto;height:100dvh;width:33%;position: fixed;right: 0;top: 0;z-index: 10000;background-color:#fbfbfb;}
.ai-generator-drawer.display-left{left:0;}
.ai-generator-drawer.display-right{right:0;}
.ai-generator-active-text-input{border:#3ccda2 2px solid;background-color: #3dcda31a;}
.ai-generator-prompt-input{border-radius: 5px !important;}
.ai-generator-prompt-input.error{border:rgb(233 132 132) solid}
.ai-generator-prompt-display-box{padding: 15px;background: white;border: 2px solid #e4e4e4;white-space: pre-wrap;border-radius: 10px !important;}
.ai-generate-response-btn{margin:10px;text-align:center;cursor:pointer;background:#3ccda2;color:#fff;border-radius: 10px !important;padding:10px;}
.ai-generate-response-btn:hover{background:#38876f;}
.ai-generate-response-btn.is-loading {position: relative;pointer-events: none;opacity: .75;}
.ai-generate-response-btn.is-loading .ai-label { visibility: hidden; }
.ai-generate-response-btn.is-loading::after {content: "";position: absolute;top: 50%; left: 50%;width: 16px; height: 16px;
  margin: -8px 0 0 -8px;border: 2px solid currentColor;border-top-color: transparent;border-radius: 50%;animation: ai-spin .8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-loader-on {position: relative;pointer-events: none;}
.ai-loader-on::after {content: "";position: absolute;top: 35%; left: 35%;width: 30%; aspect-ratio: 1;
  margin: -8px 0 0 -8px;border: 2px solid #38876f;border-top-color: transparent;border-radius: 50%;animation: ai-spin .8s linear infinite;
}

/* Photo Review Notifications */
@keyframes photo-notif-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes photo-notif-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.photo-notif-badge { position:fixed; top:80px; right:20px; z-index:10000; display:none; }
.photo-notif-badge-circle { background:#27ae60; border-radius:50%; width:50px; height:50px; box-shadow:0 4px 16px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; animation:photo-notif-pulse 2s infinite; }
.photo-notif-badge-circle span { font-size:24px; }
.photo-notif-badge-count { position:absolute; top:-5px; right:-5px; background:#e74c3c; color:#fff; border-radius:50%; width:22px; height:22px; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.photo-notif-panel { position:fixed; top:80px; right:20px; z-index:10000; max-width:380px; animation:photo-notif-slide-in 0.4s ease-out; }
.photo-notif-panel-inner { background:#fff; border-radius:10px; box-shadow:0 4px 24px rgba(0,0,0,0.18); border-left:5px solid #27ae60; padding:18px 18px 12px 18px; max-height:calc(100vh - 120px); display:flex; flex-direction:column; }
.photo-notif-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-shrink:0; }
.photo-notif-header-title { font-size:16px; font-weight:700; color:#333; }
.photo-notif-close { font-size:22px; color:#999; line-height:1; padding:0 4px; }
.photo-notif-scroll { overflow-y:auto; flex:1; padding-right:4px; }
.photo-notif-section-title { font-size:13px; font-weight:600; color:#666; margin-bottom:6px; }
.photo-notif-row { border-radius:6px; padding:10px 12px; margin-bottom:8px; display:flex; align-items:center; gap:10px; transition:background 0.2s; }
.photo-notif-row-fpr { background:#f0faf3; }
.photo-notif-row-fpr:hover { background:#d4edda; }
.photo-notif-row-pr { background:#fff8e1; }
.photo-notif-row-pr:hover { background:#fff3cd; }
.photo-notif-row img { width:40px; height:40px; border-radius:4px; object-fit:cover; }
.photo-notif-row-title { font-size:14px; font-weight:600; color:#333; }
.photo-notif-row-sub { font-size:12px; color:#666; }
.photo-notif-row-sub-pr { font-size:12px; color:#856404; }
.photo-notif-footer { display:block; text-align:center; padding:8px; font-size:13px; font-weight:600; color:#27ae60; text-decoration:none; margin-top:4px; flex-shrink:0; }

/* ── Task Notification Bell (global) ── */
.task-notif-bell {
    position: fixed; bottom: 24px; left: 24px; z-index: 9990;
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, #5a4abf, #6941c6);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(90,74,191,.35);
    transition: transform .2s, box-shadow .2s;
}
.task-notif-bell:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(90,74,191,.45); }
.task-notif-badge {
    position: absolute; top: -4px; right: -4px;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 800;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(239,68,68,.4); border: 2px solid #fff;
}
.task-notif-dropdown {
    position: absolute; bottom: 56px; left: 0; width: 340px; max-height: 400px;
    overflow-y: auto; background: #fff; border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15); border: 1px solid #e2e8f0;
}
.task-notif-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #1e293b; }
.task-notif-empty { padding: 24px 16px; text-align: center; color: #94a3b8; font-size: 13px; }
.task-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; text-decoration: none; color: #334155; transition: .12s; border-bottom: 1px solid #f8fafc; }
.task-notif-item:hover { background: #f5f3ff; text-decoration: none; color: #334155; }
.task-notif-item.unread { background: #faf5ff; border-left: 3px solid #6366f1; }
.task-notif-item-body { flex: 1; font-size: 12px; line-height: 1.5; }
.task-notif-item-body strong { color: #1e293b; }
.task-notif-item-body em { color: #4f46e5; font-style: normal; font-weight: 600; }
.task-notif-item-time { font-size: 10px; color: #94a3b8; margin-top: 2px; }

/* Sticky-note buttons — used on both the Task Tracking screen and the notification bell. */
.tt-note-toggle, .tt-note-edit, .tt-note-delete {
    background: transparent; border: 1px solid #d6c878; color: #8a6d00;
    border-radius: 5px; padding: 2px 8px; font-size: 11px; font-weight: 600;
    cursor: pointer; line-height: 1.4;
}
.tt-note-toggle:hover, .tt-note-edit:hover { background: #f5e9a3; }
.tt-note-delete { color: #b42318; border-color: #fbb4af; }
.tt-note-delete:hover { background: #fee4e2; }
.task-notif-item .tt-note-toggle { margin-left: auto; align-self: center; flex-shrink: 0; }

/* ===== Task Tracking screen ===== */
.tt-toolbar { display:flex; align-items:center; justify-content:flex-end; padding:10px 20px; gap:10px; font-family:Arial,Helvetica,sans-serif; }
.tt-toolbar .tt-loaded { font-size:11px; color:#888; }
.tt-refresh { background:linear-gradient(135deg,#5a4abf,#6941c6); color:#fff; border:none; border-radius:8px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.tt-refresh:hover { filter:brightness(1.05); }

.tt-board {
    display:flex; gap:16px; padding:0 20px 20px; overflow-x:auto; overflow-y:hidden;
    min-height:calc(100vh - 200px); align-items:flex-start; font-family:Arial,Helvetica,sans-serif;
}
.tt-board::-webkit-scrollbar { height:6px; }
.tt-board::-webkit-scrollbar-thumb { background:#c7d2fe; border-radius:3px; }

.tt-col {
    flex:0 0 320px; max-height:calc(100vh - 230px);
    display:flex; flex-direction:column;
    background:#f4f5f7; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
}
.tt-col-header {
    padding:12px 14px; background:#fff; border-bottom:1px solid #eef0f4;
    display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:#1f1f1f;
}
.tt-col-header .tt-count { margin-left:auto; background:#eef0fb; color:#4a4a4a; font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; }
.tt-col-body { padding:10px 12px; overflow-y:auto; flex:1; }

.tt-col.tt-col-overdue   .tt-col-header { background:#fef2f2; }
.tt-col.tt-col-overdue   .tt-col-header i { color:#b42318; }
.tt-col.tt-col-today     .tt-col-header { background:#f4f3ff; }
.tt-col.tt-col-today     .tt-col-header i { color:#5a4abf; }
.tt-col.tt-col-yesterday .tt-col-header { background:#ecfdf5; }
.tt-col.tt-col-yesterday .tt-col-header i { color:#16a34a; }
.tt-col.tt-col-recurring .tt-col-header { background:#e0f2fe; }
.tt-col.tt-col-recurring .tt-col-header i { color:#0369a1; }
.tt-col.tt-col-notifs    .tt-col-header { background:#fef3c7; }
.tt-col.tt-col-notifs    .tt-col-header i { color:#b45309; }

/* Notifications column — pair display: user1 → user2 */
.tt-row-notif { align-items:center; }
.tt-notif-pairs { display:flex; flex-direction:column; gap:4px; margin-bottom:6px; }
.tt-notif-pair { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#1f1f1f; flex-wrap:wrap; }
.tt-notif-pair-side { display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.tt-notif-pair-side .tt-avatar, .tt-notif-pair-side .tt-avatar-fallback { width:20px; height:20px; flex:0 0 20px; font-size:10px; }
.tt-notif-pair-arrow { color:#b45309; font-weight:700; }
.tt-notif-task { font-size:13px; margin-bottom:4px; }
.tt-notif-task a { color:#5a4abf; text-decoration:none; font-weight:600; unicode-bidi:plaintext; direction:ltr; }
.tt-notif-task a:hover { text-decoration:underline; }
.tt-row-notif-done { opacity:0.6; }
.tt-row-notif-done .tt-notif-task a { color:#7a7a7a; }
.tt-pill-muted { background:#e8e8e8; color:#666; }
.tt-col.tt-col-notes     { background:#fffbe6; border-color:#f6e58d; }
.tt-col.tt-col-notes     .tt-col-header { background:#fff8c5; color:#8a6d00; }

.tt-row { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; margin-bottom:8px; display:flex; gap:8px; align-items:flex-start; font-size:12px; }
.tt-avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; flex:0 0 24px; border:1px solid #e5e7eb; background:#fff; vertical-align:middle; }
.tt-avatar-fallback { width:24px; height:24px; border-radius:50%; flex:0 0 24px; background:#eef0fb; color:#5a4abf; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; border:1px solid #e5e7eb; }
.tt-row .tt-name { flex:1; color:#1f1f1f; unicode-bidi:plaintext; direction:ltr; }
.tt-row .tt-name a { color:#5a4abf; text-decoration:none; font-weight:500; unicode-bidi:plaintext; direction:ltr; }
.tt-row .tt-name a:hover { text-decoration:underline; }
.tt-meta { font-size:10.5px; color:#8a8a8a; display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.tt-meta strong { color:#5a5a5a; }
.tt-pill { background:#f4f3ff; color:#5a4abf; padding:1px 7px; border-radius:9px; font-weight:600; font-size:10px; }
.tt-pill.danger { background:#fee4e2; color:#b42318; }
.tt-pill.subtask { background:#f0e7ff; color:#6d28d9; }

/* Notification comments — inline list of mention comment text(s) */
.tt-notif-comments {
    background:#fff8e1; border:1px solid #f6d77c; border-radius:6px;
    padding:6px 8px; margin:4px 0 6px; font-size:11px; line-height:1.5;
    unicode-bidi:plaintext; direction:ltr;
}
.tt-notif-comment { margin-bottom:4px; word-break:break-word; }
.tt-notif-comment:last-child { margin-bottom:0; }
.tt-notif-comment strong { color:#9a6b00; margin-right:4px; }
.tt-empty { font-size:11.5px; color:#9a9a9a; padding:6px 4px; text-align:center; }

.tt-assignee-block { margin-bottom:10px; }
.tt-assignee-block:last-child { margin-bottom:0; }
.tt-assignee-name { font-size:11px; font-weight:700; color:#444; margin:4px 2px 4px; text-transform:uppercase; letter-spacing:.4px; }
.tt-recur { display:inline-block; background:#e0f2fe; color:#0369a1; padding:1px 6px; border-radius:8px; font-size:9.5px; font-weight:700; margin-left:4px; text-transform:uppercase; }

.tt-completed-badge { display:inline-block; background:#9a9a9a; color:#fff; font-size:9.5px; padding:1px 6px; border-radius:8px; font-weight:600; margin-left:4px; }

.tt-note { background:#fff8c5; border:1px solid #f0d878; border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.tt-note.tt-completed { background:#e8e8e8; border-color:#c9c9c9; }
.tt-note.tt-completed .tt-note-text { text-decoration:line-through; color:#7a7a7a; }
.tt-note-text { font-size:12px; color:#1f1f1f; white-space:pre-wrap; word-break:break-word; unicode-bidi:plaintext; direction:ltr; }
.tt-note-edit-area { width:100%; border:1px solid #f0d878; border-radius:6px; padding:6px; font-size:12px; resize:vertical; min-height:50px; font-family:inherit; unicode-bidi:plaintext; direction:ltr; }
.tt-note-edit-actions button { background:#f0d878; color:#5a4500; border:none; border-radius:5px; padding:3px 10px; font-size:11px; font-weight:600; cursor:pointer; }
.tt-note-edit-actions button.tt-note-edit-cancel { background:transparent; border:1px solid #d6c878; }
.tt-note-meta { font-size:10px; color:#8a8a8a; margin-top:5px; }
.tt-note-actions { margin-top:5px; display:flex; gap:5px; flex-wrap:wrap; }
.tt-note-add { margin-top:10px; }
.tt-note-add textarea { width:100%; border:1px solid #f0d878; border-radius:6px; padding:6px; font-size:12px; resize:vertical; min-height:50px; font-family:inherit; }
.tt-note-add button { margin-top:4px; background:#f0d878; color:#5a4500; border:none; border-radius:6px; padding:5px 12px; font-size:11.5px; font-weight:600; cursor:pointer; }
.tt-note-add select { margin-top:4px; border:1px solid #f0d878; border-radius:6px; padding:4px 6px; font-size:12px; background:#fff; }
.tt-note-assignee { display:inline-flex; align-items:center; gap:5px; margin-top:5px; padding:2px 8px 2px 2px; background:rgba(255,255,255,.6); border-radius:12px; font-size:11px; color:#5a4500; cursor:pointer; }
.tt-note-assignee:hover { background:#fff; }
.tt-note-assignee .tt-avatar, .tt-note-assignee .tt-avatar-fallback { width:18px; height:18px; flex:0 0 18px; font-size:9.5px; }
.tt-note-assignee-edit { margin-top:5px; }
.tt-note-assignee-edit select { border:1px solid #f0d878; border-radius:6px; padding:3px 6px; font-size:11.5px; background:#fff; }

/* ── Shortcut Toolbar ── */
#shortcut-toolbar-content { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:10px; background:#fff; }
#shortcut-toolbar-content a { display:flex; align-items:center; gap:8px; padding:8px 14px; background:#f5f7fa; border:1px solid #e3e8ef; border-radius:10px; text-decoration:none; color:#333; transition:all 0.15s; min-width:140px; }
#shortcut-toolbar-content a:hover { background:#e8f0fe; border-color:#b8d4f8; }
#shortcut-toolbar-content .shortcut-icon-img { border-radius:50%; background:#fff; flex-shrink:0; }
#shortcut-toolbar-content .shortcut-icon-fa { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; font-size:16px; flex-shrink:0; }
#shortcut-toolbar-content .shortcut-label { font-size:12px; font-weight:600; line-height:1.3; }
#shortcut-toolbar-toggle { text-align:center; background:#fff; padding:5px 0; cursor:pointer; border-top:1px solid #e3e8ef; }
#shortcut-toolbar-toggle span { font-size:11px; color:#999; user-select:none; }
#shortcut-toolbar-icon { font-size:10px; transition:transform 0.2s; margin-left:4px; }

/* ===== Image ALT Text Drawer ===== */
.edit-image-alt-btn { margin-left:8px; color:#3598dc; }
.edit-image-alt-btn:hover { color:#2980b9; }
#image-alt-drawer-backdrop {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:10000;
}
#image-alt-drawer {
    position:fixed; top:0; right:0; height:100%; width:380px; max-width:90vw;
    background:#fff; box-shadow:-4px 0 16px rgba(0,0,0,0.15);
    transform:translateX(100%); transition:transform 0.25s ease;
    z-index:10001; display:flex; flex-direction:column;
}
#image-alt-drawer.open { transform:translateX(0); }
#image-alt-drawer-backdrop.open { display:block; }
.image-alt-drawer-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:1px solid #eee; background:#f7f7f7;
}
.image-alt-drawer-title { font-weight:600; font-size:14px; }
.image-alt-drawer-close { line-height:1; color:#666; }
.image-alt-drawer-close:hover { color:#000; }
.image-alt-drawer-subtitle {
    padding:8px 18px; font-size:12px; color:#888; border-bottom:1px solid #f0f0f0;
}
.image-alt-drawer-ai-bar {
    padding:10px 18px; border-bottom:1px solid #f0f0f0; background:#fcfcfc;
}
.image-alt-drawer-ai-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 12px; border:1px solid #d6e4f5; border-radius:4px;
    background:#fff; color:#2c3e50; font-size:12px; font-weight:600;
    cursor:pointer; transition:background 0.15s, border-color 0.15s;
}
.image-alt-drawer-ai-btn:hover { background:#f1f7fd; border-color:#3598dc; }
.image-alt-drawer-ai-btn[disabled] { opacity:0.6; cursor:not-allowed; }
.image-alt-drawer-body { flex:1; overflow-y:auto; padding:14px 18px; }
.image-alt-drawer-body .alt-row { margin-bottom:12px; }
.image-alt-drawer-body .alt-row label {
    display:block; font-size:11px; font-weight:600; color:#555;
    text-transform:uppercase; margin-bottom:4px; letter-spacing:0.5px;
}
.image-alt-drawer-body .alt-row input {
    width:100%; padding:7px 9px; border:1px solid #ddd; border-radius:3px;
    font-size:13px; box-sizing:border-box;
}
.image-alt-drawer-body .alt-row input:focus { border-color:#3598dc; outline:none; }
.image-alt-drawer-footer {
    padding:12px 18px; border-top:1px solid #eee; background:#fafafa;
    display:flex; justify-content:flex-end; align-items:center; gap:8px;
}
.image-alt-drawer-status { flex:1; font-size:12px; color:#888; }
.image-alt-drawer-status.error { color:#c0392b; }
.image-alt-drawer-status.success { color:#27ae60; }

.cat-filter-item:hover { background:#f3f6fa; }
.cat-filter-item.cat-filter-checked { background:#e8f4fd; }
.dt-search-hidden { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }