/* === DTS Architecture Diagram - Main Styles === */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0f1419;
    color: #e8e8e8;
    overflow-x: hidden;
}

/* === Header === */
header {
    background: linear-gradient(135deg, #1a2332, #2d3748);
    padding: 20px 40px 14px;
    border-bottom: 2px solid #3182ce;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
header h1 { font-size: 1.6em; color: #63b3ed; }
header .subtitle { color: #a0aec0; font-size: 0.9em; margin-top: 4px; }

.legend {
    display: flex;
    gap: 15px;
    font-size: 0.8em;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* === Layout === */
.main-container {
    display: flex;
    height: calc(100vh - 80px);
}
.diagram-area {
    flex: 1;
    padding: 20px;
    overflow: auto;
    position: relative;
}
.sidebar {
    width: 420px;
    background: #1a2332;
    border-left: 1px solid #2d3748;
    overflow-y: auto;
    padding: 20px;
    transition: transform 0.3s;
}
.sidebar.collapsed { transform: translateX(420px); width: 0; padding: 0; }
.sidebar h2 { color: #63b3ed; margin-bottom: 10px; font-size: 1.2em; }
.sidebar h3 { color: #9ae6b4; margin: 15px 0 8px; font-size: 1em; }
.sidebar .description { color: #a0aec0; font-size: 0.85em; margin-bottom: 15px; line-height: 1.5; }

/* === Document List === */
.doc-list { list-style: none; }
.doc-list li {
    background: #2d3748;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-left: 3px solid #4299e1;
    transition: background 0.2s;
}
.doc-list li:hover { background: #3d4a5c; }
.doc-list li .doc-title {
    font-size: 0.85em;
    color: #e2e8f0;
    font-weight: 500;
}
.doc-list li .doc-meta {
    font-size: 0.75em;
    color: #718096;
    margin-top: 4px;
    display: flex;
    gap: 10px;
}
.doc-list li .doc-meta .type-badge {
    background: #2b6cb0;
    color: #bee3f8;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.8em;
}
.doc-list li a {
    color: #63b3ed;
    text-decoration: none;
    font-size: 0.75em;
}
.doc-list li a:hover { text-decoration: underline; }

/* === Architecture Grid === */
.arch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}
.layer {
    border-radius: 10px;
    padding: 16px;
    position: relative;
}
.layer-title {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    font-weight: 700;
    opacity: 0.8;
}
.layer-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* === Nodes === */
.node {
    background: #2d3748;
    border: 2px solid #4a5568;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.25s;
    text-align: center;
    min-width: 130px;
    position: relative;
}
.node:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.node.active {
    border-color: #63b3ed;
    box-shadow: 0 0 15px rgba(99,179,237,0.3);
}
.node .node-icon { font-size: 1.4em; margin-bottom: 4px; }
.node .node-name { font-size: 0.8em; font-weight: 600; }
.node .node-sub { font-size: 0.65em; color: #a0aec0; margin-top: 2px; }
.node .doc-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #e53e3e;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.65em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* === Layer Colors === */
.layer-edge { background: rgba(237, 137, 54, 0.1); border: 1px solid rgba(237, 137, 54, 0.3); }
.layer-edge .layer-title { color: #ed8936; }
.layer-edge .node { border-color: rgba(237, 137, 54, 0.4); }
.layer-edge .node:hover, .layer-edge .node.active { border-color: #ed8936; box-shadow: 0 0 15px rgba(237,137,54,0.3); }

.layer-frontend { background: rgba(72, 187, 120, 0.1); border: 1px solid rgba(72, 187, 120, 0.3); }
.layer-frontend .layer-title { color: #48bb78; }
.layer-frontend .node { border-color: rgba(72, 187, 120, 0.4); }
.layer-frontend .node:hover, .layer-frontend .node.active { border-color: #48bb78; box-shadow: 0 0 15px rgba(72,187,120,0.3); }

.layer-gateway { background: rgba(99, 179, 237, 0.1); border: 1px solid rgba(99, 179, 237, 0.3); }
.layer-gateway .layer-title { color: #63b3ed; }
.layer-gateway .node { border-color: rgba(99, 179, 237, 0.4); }
.layer-gateway .node:hover, .layer-gateway .node.active { border-color: #63b3ed; box-shadow: 0 0 15px rgba(99,179,237,0.3); }

.layer-middleware { background: rgba(159, 122, 234, 0.1); border: 1px solid rgba(159, 122, 234, 0.3); }
.layer-middleware .layer-title { color: #9f7aea; }
.layer-middleware .node { border-color: rgba(159, 122, 234, 0.4); }
.layer-middleware .node:hover, .layer-middleware .node.active { border-color: #9f7aea; box-shadow: 0 0 15px rgba(159,122,234,0.3); }

.layer-platform { background: rgba(237, 100, 166, 0.1); border: 1px solid rgba(237, 100, 166, 0.3); }
.layer-platform .layer-title { color: #ed64a6; }
.layer-platform .node { border-color: rgba(237, 100, 166, 0.4); }
.layer-platform .node:hover, .layer-platform .node.active { border-color: #ed64a6; box-shadow: 0 0 15px rgba(237,100,166,0.3); }

.layer-data { background: rgba(66, 153, 225, 0.1); border: 1px solid rgba(66, 153, 225, 0.3); }
.layer-data .layer-title { color: #4299e1; }
.layer-data .node { border-color: rgba(66, 153, 225, 0.4); }
.layer-data .node:hover, .layer-data .node.active { border-color: #4299e1; box-shadow: 0 0 15px rgba(66,153,225,0.3); }

.layer-integrations { background: rgba(246, 173, 85, 0.1); border: 1px solid rgba(246, 173, 85, 0.3); }
.layer-integrations .layer-title { color: #f6ad55; }
.layer-integrations .node { border-color: rgba(246, 173, 85, 0.4); }
.layer-integrations .node:hover, .layer-integrations .node.active { border-color: #f6ad55; box-shadow: 0 0 15px rgba(246,173,85,0.3); }

.layer-monitoring { background: rgba(129, 230, 217, 0.1); border: 1px solid rgba(129, 230, 217, 0.3); }
.layer-monitoring .layer-title { color: #81e6d9; }
.layer-monitoring .node { border-color: rgba(129, 230, 217, 0.4); }
.layer-monitoring .node:hover, .layer-monitoring .node.active { border-color: #81e6d9; box-shadow: 0 0 15px rgba(129,230,217,0.3); }

.layer-infra { background: rgba(160, 174, 192, 0.1); border: 1px solid rgba(160, 174, 192, 0.3); }
.layer-infra .layer-title { color: #a0aec0; }
.layer-infra .node { border-color: rgba(160, 174, 192, 0.4); }
.layer-infra .node:hover, .layer-infra .node.active { border-color: #a0aec0; box-shadow: 0 0 15px rgba(160,174,192,0.3); }

/* === Flow Indicators === */
.flow-indicator {
    text-align: center;
    color: #4a5568;
    font-size: 1.2em;
    margin: -4px 0;
}

/* === Search === */
.search-container {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.search-box {
    flex: 1;
    max-width: 500px;
    position: relative;
}
.search-box input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    background: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.9em;
    outline: none;
    transition: border-color 0.2s;
}
.search-box input:focus { border-color: #63b3ed; }
.search-box input::placeholder { color: #718096; }
.search-box .search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #718096;
    font-size: 0.9em;
    pointer-events: none;
}
.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #2d3748;
    border: 1px solid #4a5568;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.search-results-dropdown.active { display: block; }
.search-result-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #3d4a5c;
    transition: background 0.15s;
}
.search-result-item:hover { background: #3d4a5c; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item .result-title {
    font-size: 0.85em;
    color: #e2e8f0;
    font-weight: 500;
}
.search-result-item .result-context {
    font-size: 0.72em;
    color: #718096;
    margin-top: 3px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.search-result-item .result-context .ctx-badge {
    background: #4a5568;
    padding: 1px 6px;
    border-radius: 3px;
    color: #a0aec0;
}
.search-result-item .result-context .ctx-component {
    color: #63b3ed;
}
.search-clear {
    background: none;
    border: none;
    color: #718096;
    cursor: pointer;
    font-size: 0.8em;
    padding: 4px 8px;
}
.search-clear:hover { color: #e2e8f0; }
.search-count {
    color: #718096;
    font-size: 0.8em;
    white-space: nowrap;
}

/* === Buttons === */
.add-node-btn, .import-btn {
    background: #2b6cb0;
    color: #bee3f8;
    border: none;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 0.8em;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
    transition: background 0.2s;
}
.add-node-btn:hover, .import-btn:hover { background: #3182ce; }
.import-btn { background: #2f855a; color: #c6f6d5; }
.import-btn:hover { background: #38a169; }

.delete-node-btn {
    background: #9b2c2c;
    color: #fed7d7;
    border: none;
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 0.8em;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
    transition: background 0.2s;
}
.delete-node-btn:hover { background: #c53030; }
.delete-node-btn:disabled { background: #4a5568; color: #718096; cursor: not-allowed; }

.add-doc-btn {
    margin-top: 16px;
    background: #2d3748;
    color: #63b3ed;
    border: 1px dashed #4a5568;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.8em;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s, border-color 0.2s;
}
.add-doc-btn:hover { background: #3d4a5c; border-color: #63b3ed; }

.doc-move-btn {
    background: none;
    border: 1px solid #4a5568;
    color: #a0aec0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s;
}
.doc-move-btn:hover { border-color: #f6ad55; color: #f6ad55; }

/* === Modal === */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
    background: #1a2332;
    border: 1px solid #4a5568;
    border-radius: 10px;
    padding: 24px 28px;
    width: 600px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.modal h2 { color: #63b3ed; margin-bottom: 16px; font-size: 1.2em; }
.modal label {
    display: block;
    color: #a0aec0;
    font-size: 0.8em;
    margin-bottom: 4px;
    margin-top: 12px;
}
.modal input, .modal select, .modal textarea {
    width: 100%;
    padding: 8px 12px;
    background: #2d3748;
    border: 1px solid #4a5568;
    border-radius: 5px;
    color: #e2e8f0;
    font-size: 0.85em;
    outline: none;
}
.modal input:focus, .modal select:focus, .modal textarea:focus { border-color: #63b3ed; }
.modal textarea { resize: vertical; min-height: 60px; }
.modal .form-row { display: flex; gap: 12px; }
.modal .form-row > div { flex: 1; }
.modal .btn-row {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.modal .btn-cancel {
    background: #4a5568;
    color: #e2e8f0;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em;
}
.modal .btn-cancel:hover { background: #5a6a7c; }
.modal .btn-submit {
    background: #2b6cb0;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
}
.modal .btn-submit:hover { background: #3182ce; }
.modal .hint { color: #718096; font-size: 0.72em; margin-top: 2px; }

/* === Search Highlights === */
.node.search-highlight {
    animation: pulse 1.5s ease-in-out 3;
}
.node.search-dim { opacity: 0.3; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,179,237,0.4); }
    50% { box-shadow: 0 0 15px 5px rgba(99,179,237,0.6); }
}

/* === Stats Bar === */
.stats-bar {
    display: flex;
    gap: 20px;
    padding: 10px 40px;
    background: #1a2332;
    border-bottom: 1px solid #2d3748;
    font-size: 0.8em;
    flex-wrap: wrap;
}
.stat { color: #a0aec0; }
.stat strong { color: #63b3ed; }

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #718096;
}
.empty-state .icon { font-size: 3em; margin-bottom: 15px; }
.empty-state p { font-size: 0.9em; line-height: 1.6; }

/* === Tech Badges === */
.tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}
.tech-badge {
    background: #2d3748;
    color: #a0aec0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7em;
}

/* === Import Drop Zone === */
.import-dropzone {
    border: 2px dashed #4a5568;
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    color: #718096;
    transition: all 0.3s;
    cursor: pointer;
    margin: 16px 0;
}
.import-dropzone:hover, .import-dropzone.dragover {
    border-color: #63b3ed;
    background: rgba(99, 179, 237, 0.05);
    color: #63b3ed;
}
.import-dropzone .drop-icon { font-size: 2.5em; margin-bottom: 10px; }
.import-dropzone p { font-size: 0.85em; margin-top: 8px; }
.import-dropzone .format-hint { font-size: 0.72em; color: #4a5568; margin-top: 12px; }

.import-results {
    margin-top: 16px;
    padding: 12px;
    background: #2d3748;
    border-radius: 6px;
    font-size: 0.85em;
}
.import-results .success { color: #9ae6b4; }
.import-results .warning { color: #f6ad55; }
.import-results .error { color: #fc8181; }

/* === Responsive === */
@media (max-width: 1200px) {
    .sidebar { width: 350px; }
}
@media (max-width: 900px) {
    .main-container { flex-direction: column; }
    .sidebar { width: 100%; height: 50vh; border-left: none; border-top: 1px solid #2d3748; }
    header { padding: 15px 20px; }
    .stats-bar { padding: 10px 20px; }
}