/**
 * YSP Highlight Tool — Styles
 * Floating investigate button, card modal, toast notifications
 *
 * @package YSP_Frontend_Display
 * @since   June 2026
 */

/* ═══════════════════════════════════════════════════════════════════
   FLOATING INVESTIGATE BUTTON
   ═══════════════════════════════════════════════════════════════════ */

#ysp-ht-btn {
    position:         fixed;
    z-index:          999999;
    display:          none;
    padding:          8px 16px;
    background:       #3949ab;
    color:            #fff;
    border:           none;
    border-radius:    6px;
    font-size:        13px;
    font-weight:      600;
    font-family:      -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor:           pointer;
    box-shadow:       0 3px 10px rgba(0,0,0,0.25);
    white-space:      nowrap;
    transition:       background 0.15s ease, transform 0.1s ease;
    pointer-events:   auto;
}

#ysp-ht-btn:hover {
    background:  #2e3d99;
    transform:   translateY(-1px);
    box-shadow:  0 5px 14px rgba(0,0,0,0.3);
}

#ysp-ht-btn:active {
    transform:  translateY(0);
}

/* Small arrow indicator pointing up toward selection */
#ysp-ht-btn::before {
    content:      '';
    position:     absolute;
    top:          -6px;
    left:         50%;
    transform:    translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent #3949ab transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   CARD MODAL — OVERLAY + INNER
   ═══════════════════════════════════════════════════════════════════ */

#ysp-ht-modal {
    position:   fixed;
    inset:      0;
    z-index:    99999;
    background: rgba(0, 0, 0, 0.45);
    display:    flex;
    align-items: center;
    justify-content: center;
    padding:    16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ysp-ht-modal-inner {
    background:    #fff;
    border-radius: 12px;
    box-shadow:    0 8px 40px rgba(0,0,0,0.22);
    width:         100%;
    max-width:     480px;
    max-height:    88vh;
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    animation:     yspHtModalIn 0.18s ease;
}

@keyframes yspHtModalIn {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* ── Modal header ── */

.ysp-ht-modal-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         14px 18px 12px;
    background:      linear-gradient(135deg, #3949ab 0%, #5c6bc0 100%);
    border-radius:   12px 12px 0 0;
    flex-shrink:     0;
}

.ysp-ht-modal-title {
    font-size:   15px;
    font-weight: 700;
    color:       #fff;
    flex:        1;
    min-width:   0;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ysp-ht-modal-type-badge {
    font-size:     11px;
    font-weight:   700;
    padding:       3px 9px;
    border-radius: 10px;
    background:    rgba(255,255,255,0.2);
    color:         #fff;
    white-space:   nowrap;
    flex-shrink:   0;
}

/* Grammar badge — slightly different tint */
.ysp-ht-type-grammar {
    background: rgba(251,140,0,0.3);
}

.ysp-ht-modal-close {
    background:    rgba(255,255,255,0.2);
    border:        1px solid rgba(255,255,255,0.35);
    color:         #fff;
    font-size:     13px;
    font-weight:   600;
    padding:       4px 10px;
    border-radius: 5px;
    cursor:        pointer;
    flex-shrink:   0;
    transition:    background 0.12s;
}

.ysp-ht-modal-close:hover {
    background: rgba(255,255,255,0.35);
}

/* ── Modal body ── */

.ysp-ht-modal-body {
    flex:       1;
    overflow-y: auto;
    padding:    18px 20px 12px;
}

/* ── Loading spinner ── */

.ysp-ht-loading {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         16px 0;
    color:           #7a8a93;
    font-size:       13px;
    font-style:      italic;
}

.ysp-ht-spinner {
    width:         22px;
    height:        22px;
    border:        3px solid #e1e8ed;
    border-top:    3px solid #3949ab;
    border-radius: 50%;
    animation:     yspHtSpin 0.7s linear infinite;
    flex-shrink:   0;
}

@keyframes yspHtSpin {
    to { transform: rotate(360deg); }
}

/* ── Error ── */

.ysp-ht-error {
    color:       #c0392b;
    font-size:   13px;
    padding:     8px 0;
}

/* ── Card content ── */

.ysp-ht-card {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.ysp-ht-card-row {
    display:     flex;
    gap:         10px;
    align-items: flex-start;
    padding:     8px 10px;
    background:  #f8f9fb;
    border-radius: 6px;
    font-size:   13px;
    line-height: 1.5;
}

.ysp-ht-card-example {
    background: #f0f4ff;
    border-left: 3px solid #5c6bc0;
}

.ysp-ht-card-grammar .ysp-ht-card-error {
    background: #fff5f5;
    border-left: 3px solid #e05555;
}

.ysp-ht-card-grammar .ysp-ht-card-row:nth-child(2) {
    background: #f0faf4;
    border-left: 3px solid #26a69a;
    font-family: monospace;
    font-size:   12px;
}

.ysp-ht-card-label {
    font-size:   10px;
    font-weight: 700;
    color:       #7a8a93;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width:   70px;
    padding-top: 1px;
    flex-shrink: 0;
}

.ysp-ht-card-value {
    color:      #1a2a35;
    flex:       1;
}

.ysp-ht-card-form {
    font-family: monospace;
    font-size:   12px;
    color:       #1a6b5a;
}

.ysp-ht-card-cefr {
    display:    flex;
    margin-top: 4px;
}

/* ── Modal footer ── */

.ysp-ht-modal-footer {
    display:     flex;
    gap:         8px;
    padding:     12px 18px 14px;
    border-top:  1px solid #e1e8ed;
    flex-wrap:   wrap;
    flex-shrink: 0;
}

.ysp-ht-btn-action {
    flex:          1;
    min-width:     120px;
    padding:       9px 12px;
    border:        none;
    border-radius: 7px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all 0.12s ease;
    white-space:   nowrap;
    text-align:    center;
}

.ysp-ht-btn-dc {
    background: #3949ab;
    color:      #fff;
}

.ysp-ht-btn-dc:hover:not(:disabled) {
    background: #2e3d99;
}

.ysp-ht-btn-dict {
    background: #26a69a;
    color:      #fff;
}

.ysp-ht-btn-dict:hover:not(:disabled) {
    background: #00897b;
}

.ysp-ht-btn-dismiss {
    background: #f0f2f5;
    color:      #5a6a73;
    border:     1px solid #cdd5dc;
}

.ysp-ht-btn-dismiss:hover:not(:disabled) {
    background: #e1e8ed;
}

.ysp-ht-btn-action:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════ */

.ysp-ht-toast {
    position:      fixed;
    bottom:        24px;
    left:          50%;
    transform:     translateX(-50%) translateY(16px);
    padding:       10px 22px;
    border-radius: 6px;
    font-size:     13px;
    font-weight:   600;
    font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color:         #fff;
    z-index:       9999999;
    opacity:       0;
    transition:    opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    white-space:   nowrap;
    box-shadow:    0 3px 12px rgba(0,0,0,0.2);
}

.ysp-ht-toast-show {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

.ysp-ht-toast-success { background: #2e7d32; }
.ysp-ht-toast-error   { background: #c62828; }

/* ═══════════════════════════════════════════════════════════════════
   DC BROWSER — HOLDING / INVESTIGATION SECTION
   ═══════════════════════════════════════════════════════════════════ */

.dc-holding-toolbar {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     10px 14px;
    background:  #eef0f5;
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap:   wrap;
}

.dc-holding-selected-count {
    font-size:   13px;
    font-weight: 600;
    color:       #3949ab;
    margin-right: 4px;
}

.dc-holding-develop-btn {
    padding:       7px 16px;
    background:    #3949ab;
    color:         #fff;
    border:        none;
    border-radius: 6px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.12s;
}

.dc-holding-develop-btn:disabled {
    background: #b0bec5;
    cursor:     not-allowed;
}

.dc-holding-develop-btn:hover:not(:disabled) {
    background: #2e3d99;
}

.dc-holding-dismiss-selected-btn {
    padding:       7px 14px;
    background:    #fff;
    color:         #c62828;
    border:        1px solid #ef9a9a;
    border-radius: 6px;
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    all 0.12s;
}

.dc-holding-dismiss-selected-btn:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

.dc-holding-select-all-btn {
    padding:       7px 14px;
    background:    #fff;
    color:         #546e7a;
    border:        1px solid #cdd5dc;
    border-radius: 6px;
    font-size:     12px;
    font-weight:   600;
    cursor:        pointer;
    margin-left:   auto;
}

.dc-holding-select-all-btn:hover {
    background: #f0f2f5;
}

/* ── Holding table ── */

.dc-holding-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
}

.dc-holding-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
    background:      #fff;
}

.dc-holding-table thead th {
    background:    #f6f7f9;
    padding:       10px 12px;
    text-align:    left;
    font-size:     11px;
    font-weight:   700;
    color:         #7a8a93;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e1e8ed;
    white-space:   nowrap;
}

.dc-holding-th-check {
    width: 36px;
    text-align: center !important;
}

.dc-holding-table tbody tr {
    border-bottom: 1px solid #f0f2f5;
    transition:    background 0.1s;
}

.dc-holding-table tbody tr:last-child {
    border-bottom: none;
}

.dc-holding-table tbody tr:hover {
    background: #f8f9fb;
}

.dc-holding-row-pending {
    background: #f0f4ff !important;
}

.dc-holding-td-check {
    text-align: center;
    padding:    10px 8px;
    width:      36px;
}

.dc-holding-td-word {
    padding:     10px 12px;
    font-weight: 600;
    color:       #1a3540;
    max-width:   280px;
}

.dc-holding-word {
    margin-right: 6px;
}

.dc-holding-dc-badge {
    font-size: 12px;
    title:     "In development list";
}

.dc-holding-td-type {
    padding:    10px 12px;
    white-space: nowrap;
}

.dc-holding-type-badge {
    display:       inline-block;
    font-size:     11px;
    font-weight:   600;
    padding:       2px 9px;
    border-radius: 10px;
}

.dc-holding-type-lexis {
    background: #e8f5e9;
    color:      #2e7d32;
}

.dc-holding-type-grammar {
    background: #fff3e0;
    color:      #e65100;
}

.dc-holding-td-date {
    padding:    10px 12px;
    color:      #95a5a6;
    font-size:  12px;
    white-space: nowrap;
}

.dc-holding-td-actions {
    padding:    8px 12px;
    white-space: nowrap;
}

.dc-holding-btn {
    display:       inline-block;
    padding:       4px 10px;
    font-size:     11px;
    font-weight:   600;
    border-radius: 5px;
    border:        1px solid #cdd5dc;
    background:    #fff;
    color:         #4a5568;
    cursor:        pointer;
    margin-right:  4px;
    transition:    all 0.1s;
    white-space:   nowrap;
}

.dc-holding-btn:hover:not(:disabled) {
    background: #f0f2f5;
    border-color: #b0bec5;
}

.dc-holding-btn:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

.dc-holding-view-card,
.dc-holding-gen-card {
    border-color: #9fa8da;
    color:        #3949ab;
}

.dc-holding-view-card:hover,
.dc-holding-gen-card:hover {
    background:   #e8eaf6 !important;
    border-color: #7986cb !important;
}

.dc-holding-add-dc {
    border-color: #80cbc4;
    color:        #00695c;
}

.dc-holding-add-dc:hover:not(:disabled) {
    background:   #e0f2f1 !important;
    border-color: #4db6ac !important;
}

.dc-holding-add-dict {
    border-color: #a5d6a7;
    color:        #2e7d32;
}

.dc-holding-add-dict:hover:not(:disabled) {
    background:   #e8f5e9 !important;
}

.dc-holding-dismiss {
    border-color: #ef9a9a;
    color:        #c62828;
    padding:      4px 8px;
}

.dc-holding-dismiss:hover:not(:disabled) {
    background: #ffebee !important;
}

/* ── Checkbox styling ── */

.dc-holding-checkbox,
#dc-holding-check-all {
    width:  16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3949ab;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media ( max-width: 600px ) {
    .ysp-ht-modal-inner {
        max-width:  100%;
        max-height: 92vh;
        border-radius: 10px 10px 0 0;
    }

    #ysp-ht-modal {
        align-items: flex-end;
        padding:     0;
    }

    .ysp-ht-btn-action {
        font-size: 11px;
        padding:   8px 8px;
    }

    .dc-holding-td-date,
    .dc-holding-td-type {
        display: none;
    }
}