/* GTK Portal RCL Styles */
/* Diese Datei nutzt CSS Custom Properties, die vom Host überschrieben werden können */

/* ============================================
   GTK Color Variables (Fallbacks)
   Der Host kann diese überschreiben mit:
   
   :root {
       --gtk-400: #00a8d7;
       --gtk-500: #008cbf;
       --gtk-600: #00719f;
       --gtk-700: #00587f;
       --gtk-800: #003f5f;
       --gtk-100: #ccf2fb;
       --gtk-200: #99e5f7;
   }
   ============================================ */
:root {
    /* GTK Farbpalette - Fallbacks falls Host keine setzt */
    --gtk-100: #ccf2fb;
    --gtk-200: #99e5f7;
    --gtk-300: #66d8f3;
    --gtk-400: #00a8d7; /* primary/default */
    --gtk-500: #008cbf;
    --gtk-600: #00719f;
    --gtk-700: #00587f;
    --gtk-800: #003f5f;
    --gtk-900: #00263f;
    
    /* Semantic aliases */
    --gtk-primary: var(--gtk-700);
    --gtk-secondary: var(--gtk-400);
    --gtk-accent: #ff6600;
}

/* ============================================
   Card Header Gradient
   Wird für alle Card-Header verwendet
   ============================================ */
.bg-gradient-to-r.from-gtk-primary.to-gtk-secondary,
.card-header-gradient {
    background: linear-gradient(to right, var(--gtk-700), var(--gtk-400)) !important;
}

/* Tailwind gradient overrides für GTK Farben */
.from-gtk-primary {
    --tw-gradient-from: var(--gtk-700) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 88 127 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-gtk-secondary {
    --tw-gradient-to: var(--gtk-400) var(--tw-gradient-to-position);
}

.from-gtk-secondary {
    --tw-gradient-from: var(--gtk-400) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(0 168 215 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* ============================================
   Text Colors
   ============================================ */
.text-gtk-primary {
    color: var(--gtk-700);
}

.text-gtk-secondary {
    color: var(--gtk-400);
}

.text-gtk-accent {
    color: var(--gtk-accent);
}

/* ============================================
   Background Colors
   ============================================ */
.bg-gtk-primary {
    background-color: var(--gtk-700);
}

.bg-gtk-secondary {
    background-color: var(--gtk-400);
}

/* ============================================
   Border Colors
   ============================================ */
.border-gtk-secondary {
    border-color: var(--gtk-400);
}

/* ============================================
   Focus States
   ============================================ */
.focus\:ring-gtk-secondary:focus {
    --tw-ring-color: var(--gtk-400);
}

.focus\:border-gtk-secondary:focus {
    border-color: var(--gtk-400);
}

/* ============================================
   Drop Zone
   ============================================ */
.drop-zone-active {
    border-color: var(--gtk-400) !important;
    background: linear-gradient(to bottom right, var(--gtk-100), var(--gtk-200)) !important;
    transform: scale(1.02);
}

/* ============================================
   Progress Bar Animation
   ============================================ */
.progress-bar-animated {
    background: linear-gradient(to right, var(--gtk-400), var(--gtk-accent));
    background-size: 200% 100%;
    animation: progressGradient 2s ease infinite;
}

@keyframes progressGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ============================================
   Table Row Hover
   ============================================ */
.table-row-hover:hover {
    background-color: var(--gtk-100);
}

/* ============================================
   Upload Status Badges
   ============================================ */
.badge-waiting {
    background-color: var(--gtk-400);
    color: white;
}

.badge-uploading {
    background-color: #eab308;
    color: white;
}

.badge-success {
    background-color: #22c55e;
    color: white;
}

.badge-error {
    background-color: #ef4444;
    color: white;
}

/* ============================================
   Utility Classes
   ============================================ */
.border-3 {
    border-width: 3px;
}

/* ============================================
   Portal Sub-Navigation
   ============================================ */
.portal-nav-item {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    min-height: 44px; /* Touch target */
}

/* Mobile: Smaller padding and font */
@media (min-width: 640px) {
    .portal-nav-item {
        padding: 0.5rem 0.625rem;
        font-size: 0.8125rem;
        min-height: auto;
    }
}

.portal-nav-item i {
    margin-right: 0.3rem;
}

/* Icon-only Navigation Item (dezenter) */
.portal-nav-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    color: #9ca3af;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
}

.portal-nav-item-icon:hover {
    color: var(--gtk-600);
    background-color: var(--gtk-50);
}

.portal-nav-item-icon.portal-nav-active {
    color: var(--gtk-700) !important;
    border-bottom-color: var(--gtk-400) !important;
    background-color: var(--gtk-100);
}

/* Tooltip für Icon-only Items */
.portal-nav-item-icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    background-color: #374151;
    color: white;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    z-index: 100;
    margin-top: 0.25rem;
}

.portal-nav-item:hover {
    color: var(--gtk-700);
    background-color: var(--gtk-100);
}

.portal-nav-active {
    color: var(--gtk-700) !important;
    border-bottom-color: var(--gtk-400) !important;
    background-color: var(--gtk-100);
}

.portal-nav-active i {
    color: var(--gtk-400);
}

/* ============================================
   Mobile Table Styles - Kompaktere Darstellung
   ============================================ */
@media (max-width: 639px) {
    /* Kleinere Schriftgrößen für Tabellen auf Mobile */
    table {
        font-size: 0.7rem;
    }
    
    table th,
    table td {
        padding: 0.25rem 0.375rem !important;
    }
    
    /* Explizit px-4 py-3 überschreiben für mobile */
    table .px-4 {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
    
    table .py-3 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    /* Badges kompakter */
    table .rounded-full {
        padding: 0.125rem 0.375rem !important;
        font-size: 0.65rem;
    }
    
    /* Status-Badges in Tabellen */
    table .px-2,
    table .px-3 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    table .py-1 {
        padding-top: 0.125rem !important;
        padding-bottom: 0.125rem !important;
    }
    
    /* Flaggen kleiner */
    table .text-2xl {
        font-size: 1.25rem;
    }
    
    table .text-lg {
        font-size: 0.875rem;
    }
    
    /* Card-Inhalte kompakter */
    .rounded-xl .p-4,
    .rounded-lg .p-4 {
        padding: 0.75rem;
    }
    
    /* Summary Table Headers */
    table thead th {
        font-size: 0.6rem;
        padding: 0.25rem 0.25rem !important;
    }
    
    /* Prevent number wrapping on mobile */
    .font-bold,
    .font-semibold {
        white-space: nowrap;
    }
    
    /* Card headers even smaller padding on mobile */
    .bg-gradient-to-r {
        padding: 0.5rem !important;
    }
    
    /* Smaller badges on mobile */
    .bg-white\/20.rounded-full {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
    
    /* Divide-y Abstände kompakter */
    .divide-y > * + * {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Job-Karten kompakter */
    .divide-y .p-4 {
        padding: 0.5rem !important;
    }
}