/* ========================================
   CRRC-ARIS Shared Design System
   ======================================== */

/* Custom Scrollbar */
.custom-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* OCR / Scan Animations */
@keyframes scan-line {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Bounding Box base styles */
.ocr-box {
    position: absolute;
    border: 2px solid rgba(0, 78, 162, 0.4);
    background: rgba(0, 78, 162, 0.1);
    border-radius: 4px;
    transition: all 0.3s;
}
.ocr-box:hover {
    border-color: #004ea2;
    background: rgba(0, 78, 162, 0.2);
    z-index: 10;
}
.ocr-tag {
    position: absolute;
    top: -18px;
    left: -2px;
    background: #004ea2;
    color: white;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s;
}
.ocr-box:hover .ocr-tag { opacity: 1; }

/* CV Bounding Boxes (Vision page) */
.bbox {
    position: absolute;
    border: 2px solid;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}
.bbox:hover {
    background: rgba(255, 255, 255, 0.15);
    z-index: 20;
}
.bbox-label {
    position: absolute;
    top: -24px;
    left: -2px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Leader Line */
.leader-line {
    position: absolute;
    height: 2px;
    background: repeating-linear-gradient(90deg, #ff0055 0, #ff0055 4px, transparent 4px, transparent 8px);
    z-index: 5;
    transform-origin: left center;
    opacity: 0;
    animation: fadeIn 0.5s 1s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* Risk Item Active State */
.risk-item.active {
    background-color: #eef6ff;
    border-left-color: #004ea2;
}
.risk-item.active h4 { color: #004ea2; }

/* Graph Background */
.graph-bg-light {
    background-color: #f8fafc;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Tech Grid Pattern */
.bg-grid-pattern {
    background-image: linear-gradient(rgba(0, 78, 162, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 78, 162, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Risk Connector Arrow */
.risk-connector {
    position: absolute;
    top: 50%;
    right: -24px;
    width: 48px;
    height: 2px;
    background: #ef4444;
    z-index: 10;
}
.risk-connector::after {
    content: '\25BC';
    position: absolute;
    right: -6px;
    top: -7px;
    color: #ef4444;
    transform: rotate(-90deg);
    font-size: 10px;
}

/* Connector Lines for Graph */
.connector-line {
    stroke-dasharray: 8;
    animation: dash 30s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -1000; } }

/* Graph Node Styles */
.node-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 20;
    transition: all 0.3s ease;
}
.node-circle {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 20;
    background: white;
}
.node-wrapper:hover { z-index: 50; }
.node-wrapper:hover .node-circle {
    transform: scale(1.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.node-tooltip {
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease;
}
.node-wrapper:hover .node-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Kanban Column Height */
.kanban-col {
    min-height: calc(100vh - 450px);
}

/* Paper Texture for Document Modals */
.paper-texture {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.03'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' /%3E%3C/g%3E%3C/svg%3E");
}

/* Scan Overlay (Onboarding) */
.scan-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #00e676;
    box-shadow: 0 0 10px #00e676, 0 0 20px #00e676;
    animation: scan-line 3s linear infinite;
    z-index: 20;
}

/* Scan Line (Inventory) */
.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: rgba(255, 0, 0, 0.8);
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.8);
    animation: scan-line 2s linear infinite;
    z-index: 10;
}