@charset "UTF-8";

/* ==========================================
   Design Tokens
   ========================================== */
:root {
    --sht-primary: #38761d; /* Matches user theme */
    --sht-primary-hover: #2d5e17;
    --sht-primary-light: rgba(56, 118, 29, 0.08);
    --sht-secondary: #64748b;
    --sht-success: #10b981;
    --sht-warning: #f59e0b;
    --sht-danger: #ef4444;
    --sht-bg: #f8fafc;
    --sht-card-bg: #ffffff;
    --sht-text-main: #0f172a;
    --sht-text-muted: #64748b;
    --sht-border: #e2e8f0;
    --sht-radius: 16px;
    --sht-radius-sm: 10px;
    --sht-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --sht-shadow-focus: 0 0 0 4px var(--sht-primary-light);
    --sht-font: 'Tomorrow', sans-serif;
}

/* Global Reset for Trix in this context */
trix-toolbar .trix-button-group--file-tools {
    display: none !important;
}

/* Base Form Styling */
.sh-ticket-wrapper {
    font-family: var(--sht-font);
    line-height: 1.6;
    background-color: var(--sht-bg);
    padding: 60px 0;
}

.sh-ticket-create-card {
    border: none !important;
    border-radius: var(--sht-radius) !important;
    box-shadow: var(--sht-shadow) !important;
    animation: fadeIn 0.5s ease-out forwards;
}

/* Premium Inputs */
.sht-input-wrapper {
    position: relative;
    display: block;
}

.sht-input {
    border: 1.5px solid var(--sht-border) !important;
    border-radius: var(--sht-radius-sm) !important;
    padding: 12px 16px 12px 45px !important;
    font-size: 0.95rem !important;
    color: var(--sht-text-main) !important;
    background-color: #ffffff !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    height: auto !important;
    width: 100% !important;
}

.sht-input:focus {
    border-color: var(--sht-primary) !important;
    box-shadow: var(--sht-shadow-focus) !important;
    outline: none !important;
}

/* Input Icons Alignment Fix */
.sht-input-wrapper::before {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 14px; /* Fixed distance from bottom of wrapper (aligned with input) */
    width: 20px;
    height: 20px;
    background-color: var(--sht-text-muted);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    z-index: 10;
    transition: background-color 0.25s ease;
}

.sht-input-wrapper:focus-within::before {
    background-color: var(--sht-primary);
}

/* Specific Icons mapping */
.sht-input-name-wrapper::before, .sht-input-wrapper:has(.sht-input-name)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.sht-input-email-wrapper::before, .sht-input-wrapper:has(.sht-input-email)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); }
.sht-input-title-wrapper::before, .sht-input-wrapper:has(.sht-input-title)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); }
.sht-input-category-wrapper::before, .sht-input-wrapper:has(.sht-input-category)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); }
.sht-input-priority-wrapper::before, .sht-input-wrapper:has(.sht-input-priority)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); }

/* TinyMCE Editor Premium Styling */
.sht-tinymce-wrapper {
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border-radius: var(--sht-radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--sht-border);
    transition: all 0.25s ease;
    display: block;
    width: 100%;
}

.sht-tinymce-wrapper:focus-within {
    border-color: var(--sht-primary);
    box-shadow: var(--sht-shadow-focus);
}

/* Hide TinyMCE status bar for cleaner look */
.tox-statusbar {
    display: none !important;
}

.tox-tinymce {
    border: none !important;
    width: 100% !important;
    z-index: 9992 !important;
}

.tox-editor-header {
    z-index: 9993 !important;
}

trix-toolbar .trix-button-group {
    background: #ffffff !important;
    border: 1px solid var(--sht-border) !important;
    padding: 2px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
}

trix-editor {
    min-height: 250px !important;
    padding: 20px !important;
    border: none !important;
    font-size: 1rem !important;
    background: #ffffff !important;
}

/* Premium Button */
.sht-btn-submit {
    background-color: var(--sht-primary) !important;
    color: #ffffff !important;
    padding: 12px 40px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 4px 6px -1px rgba(56, 118, 29, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

.sht-btn-submit:hover {
    background-color: var(--sht-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(56, 118, 29, 0.4) !important;
}

.sht-btn-submit:active {
    transform: translateY(0);
}

/* Micro-animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.sh-ticket-create-card {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Responsive Tweak */
@media (max-width: 768px) {
    .sh-ticket-wrapper {
        padding: 30px 15px;
    }
    
    .sht-btn-submit {
        width: 100% !important;
    }
}