/* ======================================================== */
/*             CubeLaunch Admin Stylesheet                */
/* ======================================================== */

/* === Cropper Modal Styling === */
#cubelaunch-cropper-modal {
    display: none; /* Hide the modal by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent black overlay */
    z-index: 100001; /* Ensure it's above most WP admin elements */
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Stack content vertically */
    opacity: 0; /* Start fully transparent */
    visibility: hidden; /* Hide from accessibility tree */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Fade out effect */
}

/* Show the modal */
#cubelaunch-cropper-modal.show {
    display: flex; /* Use flex for centering */
    opacity: 1; /* Fully opaque */
    visibility: visible; /* Make it visible */
    transition: opacity 0.3s ease, visibility 0s linear 0s; /* Fade in effect */
}

/* Cropper Modal Content Wrapper */
.cubelaunch-cropper-content {
    background: #ffffff; /* White background */
    padding: 20px;
    max-width: 90%; /* Max width relative to viewport */
    max-height: 90vh; /* Max height relative to viewport */
    overflow: hidden; /* Prevent content spill */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Standard shadow */
    border-radius: 8px; /* Rounded corners */
    display: flex;
    flex-direction: column; /* Stack image and buttons vertically */
    align-items: center; /* Center items horizontally */
}

/* Cropper Image Wrapper */
.cubelaunch-cropper-image-wrapper {
    position: relative; /* Context for triangle overlay */
    width: 100%;
    max-height: calc(85vh - 100px); /* Adjust based on padding/buttons to prevent overflow */
    margin-bottom: 15px;
    overflow: hidden; /* Hide parts of image outside wrapper */
    display: flex; /* Center image inside */
    justify-content: center;
    align-items: center;
}

/* Ensure the cropper image scales correctly within its container */
#cubelaunch-cropper-image {
    max-width: 100%;
    max-height: 100%; /* Fill the wrapper height */
    display: block;
}

/* Cropper Buttons Container */
.cubelaunch-cropper-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between buttons */
    width: 100%;
    margin-top: 15px; /* Space above buttons */
    align-items: center; /* Align spinner vertically */
}

/* Cropper Buttons Styling */
#cubelaunch-cropper-save,
#cubelaunch-cropper-cancel {
    margin: 0; /* Remove default margins */
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

#cubelaunch-cropper-save {
    background-color: #2271b1; /* WP Primary Blue */
    color: #fff;
}

#cubelaunch-cropper-cancel {
    background-color: #6c757d; /* WP Secondary Gray */
    color: #fff;
}

#cubelaunch-cropper-save:hover,
#cubelaunch-cropper-save:focus {
    background-color: #1e639a; /* Darker blue on hover/focus */
}

#cubelaunch-cropper-cancel:hover,
#cubelaunch-cropper-cancel:focus {
    background-color: #5a6268; /* Darker gray on hover/focus */
}

/* Spinner next to buttons */
#cubelaunch-cropper-spinner {
    /* Uses WP default spinner styles */
    float: none;
    vertical-align: middle;
}
#cubelaunch-cropper-spinner:not(.is-active) {
    display: none;
}


/* === Triangular Overlay Styling === */
#cubelaunch-triangle-overlay {
    position: absolute; /* Absolute positioning relative to .cropper-crop-box (set by Cropper.js) or image wrapper */
    top: 0;
    left: 0;
    width: 0; /* JS will set width */
    height: 0; /* JS will set height */
    pointer-events: none; /* Allow interactions to pass through to cropper */
    z-index: 10; /* Ensure it sits above the image */
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Match modal fade */
}

/* Show the triangular overlay when it has position/size and .show class */
#cubelaunch-triangle-overlay.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* SVG Styling within the Triangle Overlay */
#cubelaunch-triangle-overlay svg {
    width: 100%;
    height: 100%;
    display: block; /* Remove extra space below SVG */
}

/* Style the mask fill and the visible border */
#cubelaunch-triangle-overlay rect[mask] {
    /* This rect fills the area OUTSIDE the mask with a semi-transparent overlay */
    fill: rgba(0, 0, 0, 0.5);
}

#cubelaunch-triangle-overlay polygon[stroke] {
    /* This polygon draws the border of the triangle */
    stroke: #ffffff; /* White border */
    stroke-width: 1; /* Use non-scaling stroke if possible (set via JS ideally, but CSS fallback) */
    vector-effect: non-scaling-stroke; /* Prevents stroke width changing on scale */
    fill: none; /* No fill for the border polygon */
}

/* === Cropper.js Specific Overrides (If Needed) === */

/* Ensure cropper container has a position context if needed */
.cropper-container {
    position: relative; /* Might be set by Cropper.js already */
}

/* Highlight the crop box for clarity (Optional) */
.cropper-view-box {
    outline: 1px solid rgba(0, 115, 170, 0.75); /* WP blue outline */
}
.cropper-face {
     background-color: inherit !important; /* Ensure transparent face */
}

/* ======================================================== */
/*             Admin Form Table Styling                     */
/* ======================================================== */

/* --- General --- */
/* Reduce spacing between standard form table rows slightly if desired */
/*
.form-table td, .form-table th {
    padding-top: 10px;
    padding-bottom: 10px;
}
*/

/* --- Enable Stocks Row Specific --- */
/* Make the hidden TH take up minimal space but exist for layout */
#cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-enable-stocks-row > th.cubelaunch-hide-label,
#cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-enable-stocks-row > th.cubelaunch-hide-label {
    width: 1px;
    padding: 8px 0 !important; /* Match vertical padding, zero horizontal */
    border: none;
    color: transparent; /* Hide any accidental text */
    line-height: 0; /* Prevent extra height */
    font-size: 0; /* Prevent extra height */
}

/* --- Separator Row Styling --- */
/* Style the separator rows */
#cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-face-separator > td,
#cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-face-separator > td {
    background-color: #f0f0f1; /* WP subtle grey background */
    border-top: 2px solid #c3c4c7; /* Stronger top border */
    border-bottom: none; /* Remove bottom border */
    padding-top: 15px !important; /* More padding above heading */
    padding-bottom: 5px !important; /* Less padding below heading */
}
/* Style the heading inside the separator */
#cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-face-separator > td h3, /* Settings Page */
#cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-face-separator > td h4 /* CPT */ {
    margin: 0; /* Remove default margin from heading inside TD */
    font-size: 1.1em; /* Slightly larger heading */
    color: #1d2327; /* Darker text color */
}

/* Remove top border for the very FIRST separator in a table */
#cubelaunch-face-fields .form-table > tbody > tr.first-separator > td,
#cubelaunch-face-fields-metabox .form-table > tbody > tr.first-separator > td {
     border-top: none !important; /* No top border for the absolute first separator */
}


/* --- Face Block Striping (REVISED) --- */

/* ODD Faces (Pinkish) */
/* Target TH and TD cells directly within ODD rows in BOTH contexts */
#cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-face-block-odd:not(.cubelaunch-face-separator) > th,
#cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-face-block-odd:not(.cubelaunch-face-separator) > td,
#cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-face-block-odd:not(.cubelaunch-face-separator) > th,
#cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-face-block-odd:not(.cubelaunch-face-separator) > td {
    background-color: #E5F3FD; /* Light blue */
    border-color: #CEDBE4; /* Matching border color */
}
/* Explicitly set hidden TH background in ODD rows */
#cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-face-block-odd.cubelaunch-enable-stocks-row > th.cubelaunch-hide-label,
#cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-face-block-odd.cubelaunch-enable-stocks-row > th.cubelaunch-hide-label {
    background-color: #E5F3FD;
}


/* EVEN Faces (Bluish) */
/* Target TH and TD cells directly within EVEN rows in BOTH contexts */
#cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-face-block-even:not(.cubelaunch-face-separator) > th,
#cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-face-block-even:not(.cubelaunch-face-separator) > td,
#cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-face-block-even:not(.cubelaunch-face-separator) > th,
#cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-face-block-even:not(.cubelaunch-face-separator) > td {
    background-color: #F5FBFF; /* Lighter Blue */
    border-color: #DDE2E6; /* Matching border color */
}
/* Explicitly set hidden TH background in EVEN rows */
#cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-face-block-even.cubelaunch-enable-stocks-row > th.cubelaunch-hide-label,
#cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-face-block-even.cubelaunch-enable-stocks-row > th.cubelaunch-hide-label {
    background-color: #F5FBFF;
}

/* --- End Face Block Striping --- */


/* === Responsive Adjustments === */
@media (max-width: 782px) { /* Standard WP breakpoint */
    /* Cropper Modal Adjustments */
    .cubelaunch-cropper-content {
        max-width: 95%;
        max-height: 95vh;
        padding: 15px;
    }
    .cubelaunch-cropper-image-wrapper {
         max-height: calc(90vh - 80px); /* Adjust height */
         margin-bottom: 10px;
    }
    .cubelaunch-cropper-buttons {
        gap: 10px;
        margin-top: 10px;
    }
    #cubelaunch-cropper-save,
    #cubelaunch-cropper-cancel {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Admin Fields Table Adjustments */
    .form-table th, .form-table td {
        padding: 10px 5px; /* Reduce padding */
        display: block; /* Stack th/td vertically */
        width: 100%;
        box-sizing: border-box;
    }
    .form-table th {
        text-align: left;
        padding-bottom: 2px; /* Less space below label */
        border-bottom: none; /* Remove bottom border when stacked */
    }
     tr.cubelaunch-enable-stocks-row > th.cubelaunch-hide-label {
         padding: 0 !important; /* No padding */
         height: 0; /* No height */
         display: none; /* Hide completely on mobile */
     }
     .form-table tr:not(.cubelaunch-face-separator) td {
         border-top: none; /* Remove top border for TD when stacked */
     }

     /* Separator adjustments */
     #cubelaunch-face-fields .form-table > tbody > tr.cubelaunch-face-separator > td,
     #cubelaunch-face-fields-metabox .form-table > tbody > tr.cubelaunch-face-separator > td {
         padding-top: 10px !important;
         padding-bottom: 5px !important;
     }
}

/* === Accessibility Enhancements === */

/* Visually hidden but accessible to screen readers */
#cubelaunch-cropper-title.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important
}

/* === Face Field Visibility === */

/* Default hide rotation row (JS will show it when needed) */
.form-table tr.cubelaunch-rotation-row {
    display: none;
}

/* Hide fallback image row by default (JS shows it) */
.form-table tr.cubelaunch-fallback-image-row {
   /* display: none; */ /* Already handled by inline style from PHP, but could be added here too */
}

/* Hide chart rows by default (JS shows them) */
.form-table tr.cubelaunch-iex-symbol-row,
.form-table tr.cubelaunch-coingecko-id-row,
.form-table tr.cubelaunch-coingecko-currency-row,
.form-table tr.cubelaunch-coingecko-days-row {
   /* display: none; */ /* Already handled by inline style from PHP */
}

/* Hide media rows by default if charts are selected (JS shows them) */
.form-table tr.cubelaunch-media-row {
  /* display: none; */ /* Already handled by inline style from PHP */
}

/* Ensure Pro notice is inline */
td p.cubelaunch-pro-notice {
    display: inline-block !important;
    margin-left: 5px;
    font-style: italic;
    color: #666;
}

/* Style for media URL input when type selection mismatches the URL */
.cubelaunch-face-field input.cubelaunch-url-mismatch {
    opacity: 0.5; /* Make it look faded/disabled */
    /* Optional: Add a subtle border */
    border-color: red; /* Light red border */
    /* Optional: Change text color slightly */
     color: #777; 
  }