/* ==========================================================================
   CSS Layout Debugger Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout Adjustments
   -------------------------------------------------------------------------- */
.tool-container {
    min-height: calc(100vh - 400px);
    /* Adjust based on header/footer */
}

/* --------------------------------------------------------------------------
   Editors
   -------------------------------------------------------------------------- */
#html-editor,
#css-editor {
    resize: none;
    font-size: 0.9rem;
    line-height: 1.5;
    background-color: #f8f9fa;
    /* Match existing light background */
    color: #212529;
    /* Match body color */
    outline: none !important;
    box-shadow: none !important;
}

#html-editor:focus,
#css-editor:focus {
    background-color: #ffffff;
}

/* Specific styling for the card headers to match the design system */
.tool-card .card-header i {
    opacity: 0.8;
}

.text-orange {
    color: #fd7e14;
}

.text-info {
    color: #0dcaf0;
}

/* --------------------------------------------------------------------------
   Preview Area
   -------------------------------------------------------------------------- */
.preview-wrapper {
    /* Keep it positioned relative for absolute canvas overlay */
    background-size: 20px 20px;
    background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
    overflow: hidden !important;
    /* Let iframe handle internal scrolling */
}

/* Transition for viewport resizing */
#live-preview-frame {
    transform-origin: top center;
    border-radius: 4px;
}

/* Viewport sizes */
#live-preview-frame.viewport-desktop {
    width: 100%;
    max-width: 1440px;
}

#live-preview-frame.viewport-tablet {
    width: 768px !important;
    margin: 0 auto;
}

#live-preview-frame.viewport-mobile {
    width: 375px !important;
    margin: 0 auto;
}

/* Canvas Overlay */
#highlight-canvas {
    pointer-events: none;
    /* Let clicks pass through to iframe */
}

/* --------------------------------------------------------------------------
   Inspector Tabs
   -------------------------------------------------------------------------- */
.inspector-tabs {
    background-color: #f8f9fa;
}

.inspector-tabs .nav-link {
    color: #495057;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 500;
}

.inspector-tabs .nav-link:hover {
    color: #0d6efd;
    border-bottom-color: #dee2e6;
}

.inspector-tabs .nav-link.active {
    color: #0d6efd;
    background-color: transparent;
    border-bottom-color: #0d6efd;
}

/* --------------------------------------------------------------------------
   Box Model Visualizer (Inspector Panel)
   -------------------------------------------------------------------------- */
.box-model-container {
    font-family: monospace;
    font-size: 0.75rem;
    user-select: none;
}

.box-model-container * {
    box-sizing: border-box;
}

.label-box {
    position: relative;
    border-style: solid;
    border-color: #dee2e6;
    /* Standard border */
    margin: 2px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 40px;
}

.box-label {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Colors matching Chrome DevTools roughly */
.box-margin {
    background-color: #fcece0;
    /* Light orange/margin */
    border-width: 1px;
    padding: 24px;
    border-style: dashed;
    border-color: #f5c2a1;
}

.box-border {
    background-color: #fdf5d6;
    /* Light yellow/border */
    border-width: 1px;
    border-color: #ebd181;
    padding: 20px;
    width: 100%;
}

.box-padding {
    background-color: #e5f5e7;
    /* Light green/padding */
    border-width: 1px;
    border-color: #b1d8b6;
    border-style: dashed;
    padding: 16px;
    width: 100%;
}

.box-content {
    background-color: #e3f0fe;
    /* Light blue/content */
    border-width: 1px;
    border-color: #a8cdfb;
    padding: 10px;
    width: 100%;
    min-height: 50px;
}

/* Value positioning within boxes */
.val-top,
.val-bottom,
.val-left,
.val-right {
    position: absolute;
    color: #495057;
    font-weight: bold;
}

.val-top {
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.val-bottom {
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.val-left {
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.val-right {
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}


/* --------------------------------------------------------------------------
   Computed Styles List
   -------------------------------------------------------------------------- */
.computed-styles-list div {
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Structure / DOM Tree
   -------------------------------------------------------------------------- */
.dom-node {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    margin-bottom: 1px;
    transition: background-color 0.15s ease;
}

.dom-node:hover {
    background-color: #e9ecef;
}

.dom-node.active {
    background-color: #cfe2ff;
    color: #084298;
}

.dom-tag {
    color: #e83e8c;
}

.dom-attr-name {
    color: #fd7e14;
}

.dom-attr-val {
    color: #0d6efd;
}

.dom-text {
    color: #212529;
}

.tree-indent {
    display: inline-block;
    width: 12px;
}

/* --------------------------------------------------------------------------
   Warnings Panel
   -------------------------------------------------------------------------- */
.warning-item {
    font-size: 0.8rem;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 4px solid #ffc107;
    background-color: #fff3cd;
    color: #664d03;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.warning-item i {
    color: #ffc107;
    margin-top: 2px;
}

.warning-item.danger {
    border-left-color: #dc3545;
    background-color: #f8d7da;
    color: #842029;
}

.warning-item.danger i {
    color: #dc3545;
}

.warning-item.info {
    border-left-color: #0dcaf0;
    background-color: #cff4fc;
    color: #055160;
}

.warning-item.info i {
    color: #0dcaf0;
}

/* Tooltips */
.tooltip-inner {
    max-width: 250px;
    text-align: left;
}