/* tjs-gf-app/src/components/common/MessageModal.css */

.tjs-msg-overlay {
    z-index: 2000;
}

.tjs-msg-modal {
    width: 400px;
    max-width: 90vw;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tjs-msg-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.tjs-msg-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tjs-msg-icon {
    font-size: 24px;
}

.tjs-msg-info { color: var(--tjs-gf-primary-color, #1967d2); }
.tjs-msg-success { color: #0f9d58; }
.tjs-msg-warning { color: #f4b400; }
.tjs-msg-error { color: #d93025; }
.tjs-msg-confirm { color: var(--tjs-gf-primary-color, #1967d2); }

.tjs-msg-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.tjs-msg-content {
    padding: 24px 20px;
    font-size: 1rem;
    color: #3c4043;
    line-height: 1.5;
}

.tjs-msg-footer {
    padding: 16px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(0,0,0,0.02);
    border-radius: 0 0 28px 28px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.tjs-btn-secondary {
    background: transparent;
    color: #5f6368;
    border: 1px solid #dadce0;
}

.tjs-btn-secondary:hover {
    background: #f1f3f4;
    color: #202124;
}

.tjs-btn-danger {
    background: #d93025;
    color: white;
}

.tjs-btn-danger:hover {
    background: #a50e0e;
}

/* tjs-gf-app/src/components/admin/locations/locations.css */

.tjs-locations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tjs-locations-header {
    display: grid;
    grid-template-columns: 2fr 4fr 1fr;
    padding: 12px 15px;
    background: #f9f9f9;
    font-weight: 600;
    border-radius: 8px;
    color: #444;
}

.tjs-location-card {
    display: grid;
    grid-template-columns: 2fr 4fr 1fr;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #eee;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: box-shadow 0.2s;
    user-select: none;
}

.tjs-location-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    background: rgba(255, 255, 255, 0.9);
}

.tjs-location-header {
    /* Reset from previous flex layout */
    display: block;
    margin: 0;
}

.tjs-location-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.tjs-location-actions {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

.tjs-location-actions button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s;
}

.tjs-location-actions button:hover {
    background: rgba(0,0,0,0.05);
}

.tjs-location-category {
    display: inline-block;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-left: 10px;
    color: #555;
}

.tjs-location-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.9rem;
    color: #666;
}

.tjs-location-detail-row {
    display: flex;
    align-items: center;
    margin: 0;
}

.tjs-location-detail-row svg {
    margin-right: 5px;
}

/* tjs-gf-app/src/components/admin/groups/groups.css */

.tjs-groups-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tjs-groups-header {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 100px;
    padding: 12px 15px;
    background: #f9f9f9;
    font-weight: 600;
    border-radius: 8px;
    color: #444;
}

.tjs-groups-row {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 100px;
    align-items: center;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #eee;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tjs-groups-row:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    background: rgba(255, 255, 255, 0.9);
}

.tjs-groups-actions {
    display: flex;
    justify-content: flex-end;
}

.tjs-groups-actions button {
    margin-right: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.tjs-groups-actions button:hover {
    background: rgba(0,0,0,0.05);
}

.tjs-group-location-tag {
    display: inline-block;
    background: #eef2ff;
    color: #4f46e5;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-right: 5px;
    margin-bottom: 2px;
}
.tjs-gf-app-structure-container {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 1.5fr;
    grid-template-rows: auto 1fr; /* Timeline, Content */
    overflow: hidden;
    position: relative;
    padding: 0;
    gap: var(--tjs-gf-tile-gap);
	margin: 16px;
}

/* Columns Wrappers for Content Row (Row 3) */
.tjs-structure-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid rgba(0,0,0,0.05);
    /* Grid placement is handled in component styles or default flow */
}

.tjs-structure-column:last-child {
    border-right: none;
}

/* Headers - Now in Top Row */
.tjs-structure-header-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid; /* Inherit 3 cols */
    /* Fallback if subgrid not supported: replicate cols */
    grid-template-columns: minmax(300px, 1fr) minmax(400px, 1.5fr) 180px;
    height: 50px;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    z-index: 10;
}

.tjs-structure-col-header {
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(0,0,0,0.05);
}
.tjs-structure-col-header:last-child { border-right: none; }

.tjs-structure-col-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

/* Content */
.tjs-structure-col-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Middle Column Specifics */
.tjs-structure-period-details {
    flex: 1;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    padding: 1.5rem;
    overflow-y: auto;
}

/* Timeline Row */
.tjs-structure-timeline-row {
    grid-column: 1 / -1;
    height: 40px; /* Reduced height */
    display: flex;
    align-items: center;
    padding: 0rem 1rem;
    position: relative;
    z-index: 5;
	padding-bottom: var(--tjs-gf-tile-gap);
}

.tjs-structure-timeline-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer; /* Clickable */
}

.tjs-structure-timeline-line {
    width: 100%;
    height: 2px;
    background: #000;
    position: relative;
}

.tjs-structure-timeline-label {
    position: absolute;
    top: 22px; /* Adjusted for smaller height */
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
}

.tjs-structure-timeline-label.start { left: 0; }
.tjs-structure-timeline-label.end { right: 0; }

.tjs-structure-timeline-marker {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 12px; /* Smaller */
    background: #aaa;
    transform: translateY(-50%);
}

.tjs-structure-timeline-marker-label {
    position: absolute;
    font-size: 0.7rem;
    color: #666;
    white-space: nowrap;
    transform: translateX(-50%);
}

.tjs-structure-timeline-marker-label.top {
    bottom: 22px; /* Above line */
}

.tjs-structure-timeline-marker-label.bottom {
    top: 22px; /* Below line */
}


.tjs-structure-timeline-current-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px; /* Line width */
    transform: translateX(-50%);
    pointer-events: none; /* Allows click through to container for jumping, BUT knob needs pointer events */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease-out;
}

.tjs-structure-timeline-current-marker.is-dragging {
    transition: none; /* Disable transition during drag */
}

.tjs-structure-timeline-current-marker .marker-line {
    width: 2px;
    background: #ea4335; /* Google Red */
    flex: 1;
}

.tjs-structure-timeline-current-marker .marker-knob {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ea4335;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px white;
    pointer-events: auto; /* Enable interaction */
    cursor: grab;
}

.tjs-structure-timeline-current-marker .marker-knob:active {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.2);
}

/* Sidebar Actions */
.tjs-structure-sidebar-actions {
    display: flex;
    gap: 10px;
    padding: 1rem 1.5rem; /* Match sidebar padding */
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .tjs-structure-sidebar-actions {
        justify-content: space-around;
    }
}

.tjs-structure-fab-btn {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 12px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
    color: white;
}

.tjs-structure-fab-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

.tjs-structure-fab-btn:active {
    transform: translateY(0);
}

.tjs-structure-fab-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.tjs-structure-fab-btn.save {
    background: #34a853; /* Google Green */
}

.tjs-structure-fab-btn.new {
    background: #4285f4; /* Google Blue */
}

.tjs-structure-fab-btn.delete {
    background: #ea4335; /* Google Red */
}

/* Responsive */
@media (max-width: 1024px) {
    .tjs-gf-app-structure-container {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        height: auto;
    }

    .tjs-structure-column {
        height: auto;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .tjs-structure-periods-list {
        max-height: 300px;
    }
}

/* Reused Styles */
.tjs-glass-input {
    background: #f1f3f4;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 12px;
    width: 100%;
    font-size: 0.9rem;
    transition: all 0.2s;
    box-sizing: border-box;
}

.tjs-glass-input:focus {
    background: white;
    border-color: #1967d2;
    box-shadow: 0 0 0 2px rgba(25, 103, 210, 0.1);
    outline: none;
}

.tjs-form-label {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 4px;
    font-weight: 500;
}

.tjs-form-row {
    margin-bottom: 12px;
}

.tjs-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.tjs-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    padding: 10px;
    background: rgba(255,255,255,0.5);
}

.tjs-checkbox-label {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
}

.tjs-checkbox-label input {
    margin-right: 6px;
}

.tjs-period-item {
    display: grid;
    grid-template-columns: 1fr 1fr 100px;
    gap: 10px;
    padding: 12px 15px;
    background: white;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
    align-items: center;
}

.tjs-period-item:hover {
    background: #f0f4fa;
}

.tjs-period-item.is-selected {
    background: #e8f0fe;
    border-left: 3px solid #1967d2;
}

.tjs-period-header-row {
    display: grid;
    grid-template-columns: 1fr 1fr 100px;
    gap: 10px;
    padding: 8px 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    border-bottom: 1px solid #ddd;
}

.tjs-btn-glass {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #333;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.tjs-btn-glass:hover {
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.tjs-btn-glass:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tjs-btn-glass.primary {
    background: #1967d2;
    color: white;
    border-color: #1967d2;
}

.tjs-btn-glass.primary:hover {
    background: #185abc;
    box-shadow: 0 2px 5px rgba(25, 103, 210, 0.3);
}

.tjs-btn-glass.danger {
    color: #d93025;
    background: rgba(217, 48, 37, 0.05);
    border-color: rgba(217, 48, 37, 0.2);
}

.tjs-btn-glass.danger:hover {
    background: rgba(217, 48, 37, 0.1);
}

.tjs-structure-master-section {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* Global Variable Height for Structure App (Desktop & Mobile) */
.tjs-structure-app-new-layout {
    height: 100% !important;
    overflow-y: auto !important;
    display: block !important;
}

.tjs-structure-app-new-layout .tjs-td-editor {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    flex: none !important;
}

.tjs-structure-app-new-layout .tjs-td-column-content {
    overflow: visible !important;
}

@media (max-width: 768px) {
    /* Mobile tweaks if needed, but main layout is now global */
}

/* New Organization App Styles - Isolated */
.tjs-structure-org-container {
    display: flex;
    height: 100%;
    overflow: hidden;
    background: #f8f9fa;
    padding: 20px;
    gap: 20px;
    box-sizing: border-box;
}

.tjs-structure-sidebar-panel {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.tjs-structure-main-panel {
    flex: 1;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.tjs-structure-panel-header {
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.tjs-structure-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #333;
}

.tjs-structure-list-container,
.tjs-structure-groups-board {
    flex: 1;
    overflow-y: auto;
    padding: 5px; /* for drag overflow visibility */
}

/* Draggable Location Card (Source) */
.tjs-structure-location-card {
    background: white;
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    cursor: grab;
    transition: all 0.2s;
    font-size: 0.9rem;
    color: #444;
}

.tjs-structure-location-card:hover {
    border-color: #1a73e8;
    background: #f8fbff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.tjs-structure-location-card:active {
    cursor: grabbing;
}

/* Group Card (Target) */
.tjs-structure-group-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.tjs-structure-group-header {
    background: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    cursor: grab; /* Drag handle for reordering groups */
}

.tjs-structure-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tjs-drag-handle {
    color: #ccc;
    cursor: grab;
}

.tjs-structure-group-actions {
    display: flex;
    gap: 5px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.tjs-structure-group-card:hover .tjs-structure-group-actions {
    opacity: 1;
}

.tjs-structure-group-content {
    padding: 10px;
    min-height: 60px; /* Drop zone area */
}

.tjs-structure-location-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tjs-structure-location-item {
    background: white;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 4px 10px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.tjs-structure-empty-state {
    text-align: center;
    color: #999;
    padding: 15px;
    font-size: 0.9rem;
    border: 2px dashed #eee;
    border-radius: 8px;
}

/* Modal - Reusing or defining specific if global missing */
.tjs-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tjs-modal-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.tjs-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
    .tjs-structure-org-container {
        flex-direction: column;
        overflow-y: auto;
    }
    .tjs-structure-sidebar-panel {
        width: 100%;
        max-height: 200px;
    }
}
/* Mobile Master Data Management Styles */
.tjs-mmdm-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f8f9fa;
    position: relative;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}

/* Sticky Master Header */
.tjs-mmdm-header {
    background: white;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 10;
    flex-shrink: 0;
}

.tjs-mmdm-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tjs-mmdm-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--tjs-gf-primary-color, #1a73e8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.tjs-mmdm-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.tjs-mmdm-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* Tabs */
.tjs-mmdm-tabs {
    display: flex;
    background: white;
    padding: 0 1rem;
    border-bottom: 1px solid #e0e0e0;
    gap: 1.5rem;
    overflow-x: auto;
    flex-shrink: 0;
}

.tjs-mmdm-tab {
    padding: 1rem 0;
    border: none;
    background: none;
    font-size: 0.95rem;
    color: #666;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.tjs-mmdm-tab.active {
    color: var(--tjs-gf-primary-color, #1a73e8);
    font-weight: 500;
}

.tjs-mmdm-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--tjs-gf-primary-color, #1a73e8);
    border-radius: 3px 3px 0 0;
}

/* Timeline Container */
.tjs-mmdm-timeline {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    position: relative;
}

/* Timeline Cards */
.tjs-mmdm-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
    transition: all 0.2s ease;
}

/* Future State */
.tjs-mmdm-card.state-future {
    border: 2px dashed #1a73e8;
    background-color: rgba(26, 115, 232, 0.05);
}

.tjs-mmdm-card.state-future .tjs-mmdm-card-header {
    color: #1a73e8;
}

/* Present State */
.tjs-mmdm-card.state-present {
    border-left: 5px solid #34a853; /* Green sidebar */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.tjs-mmdm-card.state-present .tjs-mmdm-card-header {
    color: #202124;
    font-weight: 600;
}

/* Past State */
.tjs-mmdm-card.state-past {
    background-color: #f1f3f4;
    color: #5f6368;
    border: 1px solid #e0e0e0;
}

/* Card Content */
.tjs-mmdm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.tjs-mmdm-date-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.tjs-mmdm-value-display {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0.5rem 0;
}

.tjs-mmdm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* FAB */
.tjs-mmdm-fab {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--tjs-gf-primary-color, #1a73e8);
    color: white;
    border: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 20;
    transition: transform 0.2s;
}

.tjs-mmdm-fab:active {
    transform: scale(0.95);
}

/* History Toggle */
.tjs-mmdm-history-toggle {
    text-align: center;
    padding: 1rem;
    color: #666;
    cursor: pointer;
    font-size: 0.9rem;
    user-select: none;
}

/* EDITOR OVERLAY */
.tjs-mmdm-editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.tjs-mmdm-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: white;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.tjs-mmdm-editor-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.tjs-mmdm-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.tjs-mmdm-editor-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: white; /* Linear gradient maybe better for float effect? */
    background: linear-gradient(to top, white 80%, rgba(255,255,255,0));
    text-align: right;
    pointer-events: none; /* Let clicks pass through transparent part if we had one */
}

.tjs-mmdm-editor-footer > button {
    pointer-events: auto;
    width: 100%;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Styles Helpers */
.tjs-btn-icon-sm {
    background: transparent;
    border: none;
    color: #666;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
}

.tjs-btn-icon-sm:hover {
    background: #f1f3f4;
}

.tjs-btn-icon-sm.danger {
    color: #d93025;
}

.tjs-btn-large-primary {
    background-color: var(--tjs-gf-primary-color, #1a73e8);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 24px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Force Form Styles on Mobile */
.tjs-mmdm-form-wrapper {
    /* Target the reused admin forms */
}

/* Deep Selector Override for reusable components */
.tjs-mmdm-form-wrapper > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
}

/* Also for Opening Hours header which is 1fr 1fr */
.tjs-mmdm-form-wrapper .tjs-form-group {
    margin-bottom: 1rem;
}
.tjs-members-sidebar {
    width: 250px;
    border-right: 1px solid rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.5);
    display: flex;
    flex-direction: column;
}

.tjs-members-list {
    flex: 1;
    overflow-y: auto;
}

.tjs-member-item {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    transition: background 0.2s;
}

.tjs-member-item:hover {
    background: rgba(0,0,0,0.02);
}

.tjs-member-item.active {
    background: rgba(66, 133, 244, 0.1);
    border-right: 3px solid var(--tjs-gf-primary-color);
}

.tjs-member-name {
    font-weight: 500;
    color: #3c4043;
}

.tjs-member-meta {
    font-size: 12px;
    color: #70757a;
}
.tjs-gf-app-iam-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.tjs-gf-app-iam-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 10px;
}

.tjs-gf-app-iam-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    color: #5f6368;
    border-radius: 8px;
    transition: all 0.2s;
}

.tjs-gf-app-iam-nav-item:hover {
    background: rgba(0,0,0,0.05);
}

.tjs-gf-app-iam-nav-item.active {
    background: #e8f0fe;
    color: #1967d2;
    font-weight: 500;
}

.tjs-gf-app-iam-content {
    flex: 1;
    overflow-y: auto;
}

/* User List */
.tjs-gf-app-iam-user-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.tjs-gf-app-iam-user-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s;
}

.tjs-gf-app-iam-user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.1);
}

.tjs-gf-app-iam-user-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tjs-gf-app-iam-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #1967d2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.tjs-gf-app-iam-user-info h3 {
    margin: 0;
    font-size: 1rem;
    color: #202124;
}

.tjs-gf-app-iam-user-info span {
    font-size: 0.8rem;
    color: #5f6368;
}

.tjs-gf-app-iam-role-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tjs-gf-app-iam-role-tag {
    background: #f1f3f4;
    color: #3c4043;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Role List */
.tjs-gf-app-iam-role-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tjs-gf-app-iam-role-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.tjs-gf-app-iam-role-meta h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
}

.tjs-gf-app-iam-role-meta p {
    margin: 0;
    font-size: 0.85rem;
    color: #5f6368;
}

.tjs-gf-app-iam-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fce8e6;
    color: #c5221f;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 8px;
}

.tjs-gf-app-iam-fab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: white;
    color: #1967d2;
    box-shadow: 0 6px 10px rgba(0,0,0,0.14), 0 1px 18px rgba(0,0,0,0.12);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 100;
}

/* Modal / Editor */
.tjs-gf-app-iam-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.tjs-gf-app-iam-modal {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 38px rgba(0,0,0,0.14);
    display: flex;
    flex-direction: column;
}

.tjs-gf-app-iam-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tjs-gf-app-iam-modal-header h2 {
    margin: 0;
}

.tjs-gf-app-iam-modal-content {
    padding: 20px;
    flex: 1;
}

.tjs-gf-app-iam-modal-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.tjs-gf-app-btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.tjs-gf-app-btn-primary {
    background: #1967d2;
    color: white;
}

.tjs-gf-app-btn-secondary {
    background: #f1f3f4;
    color: #3c4043;
}

.tjs-gf-app-form-group {
    margin-bottom: 16px;
}

.tjs-gf-app-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.tjs-gf-app-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Checkbox Matrix */
.tjs-gf-app-iam-perm-group {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.tjs-gf-app-iam-perm-header {
    background: #f8f9fa;
    padding: 10px 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.tjs-gf-app-iam-perm-list {
    padding: 10px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.tjs-gf-app-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Scopes */
.tjs-gf-app-iam-scope-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tjs-gf-app-iam-scope-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f1f3f4;
    border-radius: 4px;
    font-size: 0.9rem;
}

.tjs-gf-app-iam-scope-add {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.tjs-solver-list {
    padding: 1rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tjs-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tjs-table-container {
    overflow-x: auto;
}

.tjs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tjs-table th {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 2px solid #eee;
    color: #666;
    font-weight: 600;
}

.tjs-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.tjs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.tjs-badge-success { background-color: #d1fae5; color: #065f46; }
.tjs-badge-error { background-color: #fee2e2; color: #991b1b; }
.tjs-badge-warning { background-color: #fef3c7; color: #92400e; }
.tjs-badge-info { background-color: #dbeafe; color: #1e40af; }
.tjs-badge-neutral { background-color: #f3f4f6; color: #374151; }

.tjs-progress-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tjs-progress-bar-bg {
    flex: 1;
    height: 6px;
    background-color: #e5e7eb;
    border-radius: 3px;
    min-width: 60px;
}

.tjs-progress-bar-fill {
    height: 100%;
    background-color: var(--tjs-blue-normal, #3b82f6);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tjs-progress-text {
    font-size: 0.75rem;
    color: #666;
    min-width: 30px;
}

.tjs-status-msg {
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.25rem;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tjs-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    color: #666;
    transition: background 0.2s;
}

.tjs-icon-btn:hover {
    background-color: #f3f4f6;
    color: #000;
}

.tjs-btn-text {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.tjs-btn-text:hover {
    background-color: #fef2f2;
}

.tjs-text-danger {
    color: #dc2626;
}

.spin-icon svg {
    animation: spin 1s linear infinite;
}
/* FrameworkGantt.css */

/* View Container */

.tjs-gf-app-framework-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    flex: 1;
    overflow: hidden;
}

.tjs-gf-app-gantt-view {
    flex: 1;
    overflow: auto;
    background-color: transparent !important;
    padding: 1rem;
    position: relative;
    border-radius: 20px;
}

.tjs-gf-app-gantt-container {
    position: relative;
}

/* Header */

.tjs-gf-app-gantt-header {
    display: flex;
    height: 50px;
    border-bottom: 1px solid var(--tjs-gf-border-color);
    position: sticky;
    top: 0;
    z-index: 20;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background-color: transparent !important;
}

.tjs-gf-app-gantt-header-spacer {
    width: 120px;
    flex-shrink: 0;
    border-right: 1px solid var(--tjs-gf-border-color);
    background-color: transparent;
    padding: 0 8px;
}

.tjs-gf-app-gantt-header-day {
    flex: 1;
    box-sizing: border-box;
    border-right: 1px solid var(--tjs-gf-border-color);
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    font-size: 0.9rem;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.4); /* Base tile style */
}

/* Alternating darker background for days */

.tjs-gf-app-gantt-header-day:nth-child(even),
.tjs-gf-app-gantt-location-content .tjs-gf-app-gantt-day-dividers > div:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

.tjs-gf-app-gantt-header-day-label {
    position: sticky;
    left: 0;
    padding-left: 8px;
    width: fit-content;
}

.tjs-gf-app-gantt-header-ticks {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
}

.tjs-gf-app-gantt-header-tick {
    position: absolute;
    bottom: 2px;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: #888;
}

/* Location Rows */

.tjs-gf-app-gantt-location-row {
    display: flex;
    border-bottom: 1px solid var(--tjs-gf-border-color);
    padding: 0 0 3px 0;
    background-color: transparent !important;
}

.tjs-gf-app-gantt-location-name {
    width: 120px;
    flex-shrink: 0;
    border-right: 1px solid var(--tjs-gf-border-color);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 8px;
    font-weight: bold;
    font-size: 0.9rem;
    color: #333;
    text-align: center;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.65); /* Keep name readable */
}

.tjs-gf-app-gantt-location-name-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    cursor: pointer;
    gap: 4px;
}

.tjs-gf-app-gantt-location-content {
    flex: 1;
    position: relative;
    /* Tile Style Background logic applied via day dividers overlay */
}

.tjs-gf-app-gantt-day-dividers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 1;
    pointer-events: none;
}

.tjs-gf-app-gantt-day-dividers > div {
    flex: 1;
    box-sizing: border-box;
    border-right: 1px solid var(--tjs-gf-border-color);
    background-color: rgba(255, 255, 255, 0.4); /* Tile base */
}

.tjs-gf-app-gantt-status-bar {
    height: 4px;
    position: relative;
    width: 100%;
    margin: 0 0 3px 0;
    background-color: #eee;
}

.tjs-gf-app-gantt-booking-area {
    position: relative;
    cursor: crosshair;
    z-index: 5;
}

.tjs-gf-app-gantt-grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.tjs-gf-app-gantt-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px dashed #eee;
}

/* Drag Overlay */

.tjs-gf-app-gantt-drag-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: rgba(66, 133, 244, 0.3);
    border-left: 2px solid #4285F4;
    border-right: 2px solid #4285F4;
    z-index: 100;
    pointer-events: none;
}

.tjs-gf-app-gantt-drag-label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Closed Intervals */

.tjs-gf-app-gantt-closed {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: rgba(200, 200, 200, 0.3);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(100,100,100,0.1) 5px, rgba(100,100,100,0.1) 10px);
    z-index: 1;
    pointer-events: none;
}

/* Subdivisions */

.tjs-gf-app-gantt-horizontal-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* Bookings */

.tjs-gf-app-gantt-booking {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1.2;
    padding: 2px;
    transition: opacity 0.2s ease, z-index 0.2s ease;
}

.tjs-gf-app-gantt-status-toggle {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    border: 1px solid #ccc;
}

.tjs-gf-app-gantt-booking-label {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 0.75rem;
    color: #000;
}

.tjs-gf-app-gantt-booking-details {
    font-size: 0.65rem;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Modal */

.tjs-gf-app-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.tjs-gf-app-modal {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.5);
}

.tjs-gf-app-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.tjs-gf-app-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: #666;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tjs-gf-app-close-btn:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Sidebar & Actions */

.tjs-framework-sidebar-spacer {
    position: relative;
    min-height: 100px;
    margin-top: auto;
}

.tjs-framework-actions-floating {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
    width: max-content;
    pointer-events: auto;
}

:root {
  /* --- Base Colors (Light Theme Defaults) --- */
  --tjs-gf-bg-surface: #ffffff;
  --tjs-gf-bg-background: #f8f9fa; /* Slightly darker bg for app shell */
  --tjs-gf-bg-modal: #f8fafd;
  --tjs-gf-bg-input: rgba(255,255,255,0.6);
  --tjs-gf-bg-input-hover: white;
  --tjs-gf-bg-hover: #f1f3f4;
  --tjs-gf-bg-active: #e8f0fe;

  --tjs-gf-text-primary: #3c4043;
  --tjs-gf-text-secondary: #70757a;
  --tjs-gf-text-inverse: #ffffff;

  --tjs-gf-border-color: rgba(0,0,0,0.1);
  --tjs-gf-border-light: rgba(0,0,0,0.05);

  --tjs-gf-shadow-color: rgba(0,0,0,0.1);

  /* Glass Effects */
  --tjs-gf-glass-bg: rgba(255, 255, 255, 0.75);
  --tjs-gf-glass-border: 1px solid rgba(255, 255, 255, 0.5);
  --tjs-gf-header-bg: rgba(255, 255, 255, 0.9);

  /* Branding / Primary */
  --tjs-gf-primary-color: #4285f4;
  --tjs-gf-primary-rgb: 66, 133, 244;
  --tjs-blue-normal: #4285f4;
  --tjs-blue-dark: #1967d2;
  --tjs-blue-light: #e8f0fe;
  --tjs-blue-dark-75: rgba(25, 103, 210, 0.75); /* Used for gradient */

  /* Status Colors (Default) */
  --tjs-gf-success-color: #34a853;
  --tjs-gf-danger-color: #ea4335;
  --tjs-gf-warning-color: #fbbc04;

  /* Availability Colors */
  --tjs-gf-avail-free: #86efac; /* Green-ish */
  --tjs-gf-avail-full: #fca5a5; /* Red-ish */
  --tjs-gf-avail-partial: #fde047; /* Yellow-ish */
  --tjs-gf-avail-closed: #d1d5db; /* Gray */

  /* Grid/Tile Configuration */
  --tjs-gf-grid-line-color: rgba(0,0,0,0.08);
  --tjs-gf-tile-gap: 4px;
  --tjs-gf-tile-bg: var(--tjs-gf-bg-surface);
  --tjs-gf-tile-border: 1px solid var(--tjs-gf-border-light);
  --tjs-gf-tile-radius: 8px;

  --tjs-gf-radius-lg: 16px;
  --tjs-gf-radius-md: 12px;
  --tjs-gf-radius-sm: 8px;

  --tjs-gf-sidebar-width: 280px;
  --tjs-gf-header-height: 64px;
  --tjs-gf-applinks-width: 64px;
  --tjs-gf-planning-indent-base: 16px;
  --tjs-gf-planning-indent-step: 20px;
}

/* --- Dark Mode Theme --- */

body.tjs-dark-mode {
  --tjs-gf-bg-surface: #1e1e1e;
  --tjs-gf-bg-background: #121212;
  --tjs-gf-bg-modal: #2d2d2d;
  --tjs-gf-bg-input: rgba(255,255,255,0.05);
  --tjs-gf-bg-input-hover: #333;
  --tjs-gf-bg-hover: rgba(255,255,255,0.1);
  --tjs-gf-bg-active: rgba(66, 133, 244, 0.2);

  --tjs-gf-text-primary: #e8eaed;
  --tjs-gf-text-secondary: #9aa0a6;
  --tjs-gf-text-inverse: #121212;

  --tjs-gf-border-color: rgba(255,255,255,0.15);
  --tjs-gf-border-light: rgba(255,255,255,0.1);

  --tjs-gf-shadow-color: rgba(0,0,0,0.5);

  --tjs-gf-glass-bg: rgba(30, 30, 30, 0.75);
  --tjs-gf-glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --tjs-gf-header-bg: rgba(30, 30, 30, 0.9);

  /* Adjust Primary for Dark Mode visibility */
  --tjs-gf-primary-color: #8ab4f8;
  --tjs-blue-normal: #8ab4f8;
  --tjs-blue-dark: #aecbfa;
  --tjs-blue-light: rgba(66, 133, 244, 0.2);
  --tjs-blue-dark-75: rgba(0, 0, 0, 0.8); /* Dark gradient start */

  /* Default Status Colors (Darkened slightly or adjusted for contrast) */
  --tjs-gf-success-color: #81c995;
  --tjs-gf-danger-color: #f28b82;
  --tjs-gf-warning-color: #fdd663;

  /* Availability Colors (Dark Mode) */
  --tjs-gf-avail-free: #388e3c; /* Darker Green */
  --tjs-gf-avail-full: #d32f2f; /* Darker Red */
  --tjs-gf-avail-partial: #fbc02d; /* Darker Yellow */
  --tjs-gf-avail-closed: #424242; /* Dark Gray */
}

/* --- Daltonism Mode (Overrides) --- */

/* Works on top of Light OR Dark mode */

body.tjs-daltonism-mode {
  /* IBM Safe Palette */
  --tjs-gf-success-color: #009E73; /* Teal */
  --tjs-gf-danger-color: #D55E00; /* Vermilion */
  --tjs-gf-warning-color: #E69F00; /* Orange */

  /* Availability Overrides */
  --tjs-gf-avail-free: #009E73;
  --tjs-gf-avail-full: #D55E00;
  --tjs-gf-avail-partial: #E69F00;
}

#tjs-gf-app-root {
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  color: var(--tjs-gf-text-primary);
  background-color: var(--tjs-gf-bg-surface);
  -webkit-font-smoothing: antialiased;
  margin-block-start: 0;
  height: 100svh;
}

/* App Shell with Glassmorphism */

.tjs-gf-app-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
}

body.page-template-tjs_gf_app {
    overflow: hidden;
}

/* Content Area */

.tjs-gf-app-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at top left, var(--tjs-blue-dark-75),var(--tjs-blue-light));
  border-radius: 20px;
}

/* Header (Generic/Mobile) */

.tjs-gf-app-header {
  height: var(--tjs-gf-header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: var(--tjs-gf-header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 50;
  color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-header-1 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tjs-gf-app-header-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tjs-gf-app-header-logo {
    height: 60px;
    width: auto;
}

.tjs-gf-app-header-text {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--tjs-gf-text-primary);
    letter-spacing: -0.5px;
}

.tjs-gf-app-header-2 {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.tjs-gf-app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.tjs-gf-app-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  padding-right: 1rem;
}

.tjs-gf-app-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--tjs-gf-radius-sm);
  transition: background-color 0.2s;
  color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-header-title:hover {
    background-color: var(--tjs-gf-bg-hover);
}

.tjs-gf-app-date-nav {
    display: flex;
    gap: 4px;
    margin-right: 8px;
}

.tjs-gf-app-icon-btn, .tjs-gf-app-icon-btn-small {
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--tjs-gf-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
}

.tjs-gf-app-icon-btn { padding: 10px; }

.tjs-gf-app-icon-btn-small { padding: 6px; width: 32px; height: 32px; }

.tjs-gf-app-icon-btn:hover, .tjs-gf-app-icon-btn-small:hover {
  background-color: var(--tjs-gf-bg-hover);
  transform: scale(1.05);
}

/* Sidebar  */

.tjs-gf-app-sidebar {
  position: absolute;
  top: 0; left: 0;
  height: calc(100svh - 7.3rem);
  width: var(--tjs-gf-sidebar-width);
  background: var(--tjs-gf-header-bg);
  backdrop-filter: blur(16px);
  z-index: 60;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 2px 0 24px var(--tjs-gf-shadow-color);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.1);
  border-radius: 30px;
}

.tjs-gf-app-sidebar.is-open {
  transform: translateX(0);
}

.tjs-gf-app-sidebar-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 55;
    animation: fadeIn 0.3s;
}

.tjs-gf-app-sidebar-spacer {
    display: none;
}

/* Sidebar Internals */

.tjs-gf-app-sidebar-header {
  height: var(--tjs-gf-header-height);
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-bottom: 1px solid var(--tjs-gf-border-light);
  margin-bottom: 8px;
}

.tjs-gf-app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tjs-gf-app-sidebar-logo {
    height: 40px;
    width: auto;
}

.tjs-gf-app-sidebar-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-logo {
  font-size: 22px;
  font-weight: 400;
  color: var(--tjs-gf-text-primary);
  letter-spacing: -0.5px;
}

.tjs-gf-app-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.tjs-gf-app-nav-item {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto 4px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: var(--tjs-gf-radius-sm);
  cursor: pointer;
  color: var(--tjs-gf-text-primary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background-color 0.2s;
}

.tjs-gf-app-nav-item:hover {
  background-color: var(--tjs-gf-bg-hover);
}

.tjs-gf-app-nav-item.active {
  background-color: var(--tjs-gf-bg-active);
  color: var(--tjs-gf-primary-color);
}

.tjs-gf-app-nav-icon {
  margin-right: 12px;
  display: flex;
  align-items: center;
}

.tjs-gf-app-divider {
  height: 1px;
  background-color: var(--tjs-gf-border-color);
  margin: 8px 0;
}

.tjs-gf-app-calendar-section {
  padding: 12px 24px;
}

.tjs-gf-app-section-title {
  font-size: 12px;
  color: var(--tjs-gf-text-secondary);
  margin-bottom: 12px;
  font-weight: 500;
}

.tjs-gf-app-calendar-filter {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-calendar-filter input {
  display: none;
}

.tjs-gf-app-checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid;
  border-radius: 2px;
  margin-right: 12px;
  display: inline-block;
  position: relative;
}

/* Header Internals */

.tjs-gf-app-month-name {
    font-size: 2rem;
    font-weight: 400;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-dropdown-arrow {
    font-size: 10px;
    color: var(--tjs-gf-text-secondary);
    margin-left: 4px;
}

.tjs-gf-app-calendar-icon-day {
    position: absolute;
    font-size: 9px;
    font-weight: 700;
    top: 15px;
    color: var(--tjs-gf-text-primary);
    pointer-events: none;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Mini Calendar Dropdown */

.tjs-gf-app-mini-calendar-dropdown {
    position: absolute;
    top: 60px;
    left: 20px;
    background: var(--tjs-gf-glass-bg);
    backdrop-filter: blur(12px);
    border-radius: var(--tjs-gf-radius-lg);
    box-shadow: var(--tjs-gf-glass-shadow);
    border: var(--tjs-gf-glass-border);
    padding: 16px;
    z-index: 100;
    width: 280px;
    animation: slideDown 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tjs-gf-app-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tjs-gf-app-mini-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-mini-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
}

.tjs-gf-app-mini-day-label {
    font-size: 11px;
    color: var(--tjs-gf-text-secondary);
    font-weight: 500;
}

.tjs-gf-app-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.tjs-gf-app-mini-cell {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.1s;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-mini-cell:hover {
    background-color: var(--tjs-gf-bg-hover);
}

.tjs-gf-app-mini-cell.dimmed {
    color: var(--tjs-gf-border-color); /* Lighter text */
}

.tjs-gf-app-mini-cell.selected {
    background-color: var(--tjs-blue-light);
    color: var(--tjs-gf-primary-color);
    font-weight: 600;
}

.tjs-gf-app-mini-cell.today {
    background-color: var(--tjs-blue-dark);
    color: var(--tjs-gf-bg-surface);
}

.tjs-gf-app-mini-cell.today:hover {
    filter: brightness(0.9);
}

/* Month View Tiles (Full Height Fix) */

.tjs-gf-app-month-view {
    padding: 0 16px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.tjs-gf-app-month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: var(--tjs-gf-tile-gap);
}

.tjs-gf-app-month-day-name {
    font-weight: 500;
    font-size: 1rem;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(auto-fit, minmax(1px, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--tjs-gf-tile-gap);
    padding-bottom: 0;
    flex: 1;
}

.tjs-gf-app-month-cell {
    background: var(--tjs-gf-tile-bg);
    border: var(--tjs-gf-tile-border);
    border-radius: var(--tjs-gf-tile-radius);
    box-shadow: 0 2px 6px var(--tjs-gf-border-light);
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 8px;
    display: flex;
    flex-direction: column;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-month-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: var(--tjs-gf-bg-surface);
    z-index: 2;
}

.tjs-gf-app-month-cell.disabled {
    background: rgba(255, 255, 255, 0.1); /* transparent-ish */
    color: var(--tjs-gf-text-secondary);
    box-shadow: none;
    border-color: transparent;
}

.tjs-gf-app-month-date {
    font-weight: 500;
    margin-bottom: 8px;
}

.tjs-gf-app-month-event-dot {
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 11px;
    margin-bottom: 2px;
    background-color: var(--tjs-gf-primary-color);
    color: var(--tjs-gf-text-inverse);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Week & Day View Styling */

.tjs-gf-app-week-view {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tjs-gf-app-week-header {
    display: flex;
    border-bottom: 1px solid var(--tjs-gf-border-light);
    background: var(--tjs-gf-glass-bg);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    flex-shrink: 0;
    gap: 8px;
}

.tjs-gf-app-week-body-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.tjs-gf-app-week-tiles-container {
    display: flex;
    gap: 12px;
    height: 100%;
    flex-wrap: nowrap;
}

/* Day Tile (Card) Column */

.tjs-gf-app-day-tile {
    display: flex;
    flex-direction: column;
    background: var(--tjs-gf-glass-bg);
    backdrop-filter: blur(8px);
    border: var(--tjs-gf-glass-border);
    border-radius: var(--tjs-gf-radius-lg);
    min-width: 300px;
    width: 300px;
    max-width: 100%;
    transition: transform 0.2s;
    overflow-y: auto;
}

.tjs-gf-app-day-tile.is-today {
    background: var(--tjs-gf-glass-bg);
    border-color: var(--tjs-blue-normal);
    box-shadow: 0 4px 12px var(--tjs-blue-light);
}

.tjs-gf-app-day-tile-header {
    padding: 12px;
    border-bottom: 1px solid var(--tjs-gf-border-light);
    text-align: center;
}

.tjs-gf-app-day-tile-name {
    font-size: 12px;
    color: var(--tjs-gf-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
}

.tjs-gf-app-day-tile-number {
    font-size: 24px;
    font-weight: 400;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-day-tile.is-today .tjs-gf-app-day-tile-number {
    color: var(--tjs-gf-primary-color);
    font-weight: 600;
}

.tjs-gf-app-day-tile-content {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Slot & Event Items in Tile View */

.tjs-gf-app-tile-item {
    background: var(--tjs-gf-bg-surface);
    border-radius: var(--tjs-gf-radius-md);
    padding: 10px;
    box-shadow: 0 1px 3px var(--tjs-gf-shadow-color);
    border: 1px solid var(--tjs-gf-border-light);
    transition: transform 0.1s, box-shadow 0.1s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tjs-gf-app-tile-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--tjs-gf-shadow-color);
}

.tjs-gf-app-tile-time {
    font-size: 11px;
    color: var(--tjs-gf-text-secondary);
    font-weight: 500;
}

.tjs-gf-app-tile-title {
    font-size: 13px;
    color: var(--tjs-gf-text-primary);
    font-weight: 500;
}

.tjs-gf-app-tile-slot {
    background: var(--tjs-blue-light);
    border: 1px dashed var(--tjs-blue-normal);
    color: var(--tjs-blue-dark);
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

.tjs-gf-app-tile-slot:hover {
    background: var(--tjs-gf-bg-active);
}

.tjs-gf-app-empty-state {
    padding: 20px;
    text-align: center;
    color: var(--tjs-gf-text-secondary);
    font-size: 12px;
    font-style: italic;
}

/* Modal Glass */

.tjs-gf-app-modal {
    background: var(--tjs-gf-glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: var(--tjs-gf-glass-border);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset;
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 420px;
    max-width: 90vw;
    color: var(--tjs-gf-text-primary);
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.tjs-gf-app-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--tjs-gf-border-light);
}

.tjs-gf-app-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.tjs-gf-app-modal-body {
    padding: 24px;
}

.tjs-gf-app-close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--tjs-gf-text-secondary);
    padding: 0;
    line-height: 1;
}

/* Booking Summary */

.tjs-gf-app-booking-summary {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}

.tjs-gf-app-summary-date {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1rem;
    color: var(--tjs-gf-primary-color);
}

.tjs-gf-app-time-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tjs-gf-app-input.tjs-time-input {
    flex: 1;
    text-align: center;
    font-weight: 500;
    font-size: 1.1rem;
    padding: 8px;
}

/* Inputs */

.tjs-gf-app-input {
    background: var(--tjs-gf-bg-input);
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid var(--tjs-gf-border-light);
    transition: all 0.2s;
    font-size: 14px;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-input:focus {
    background: var(--tjs-gf-bg-input-hover);
    border-color: var(--tjs-gf-primary-color);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
    outline: none;
}

/* Form Row */

.tjs-gf-app-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

/* FAB */

.tjs-gf-app-fab {
    position: absolute;
    /* Desktop default */
    top: 5.2rem;
    left: 1.2rem;
    width: 3.8rem;
    height: 3.8rem;

    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;

    border-radius: 20px;
    box-shadow: 0 6px 16px var(--tjs-blue-dark);
    color: var(--tjs-blue-dark);
    background: var(--tjs-gf-bg-surface);
    transition: transform 0.2s, box-shadow 0.2s;
}

.tjs-gf-app-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(66, 133, 244, 0.4);
}

/* User Avatar */

.tjs-gf-app-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 14px;

    background: linear-gradient(135deg, #4285f4, #8ab4f8);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}

/* Time Grid Styles */

.tjs-gf-app-time-grid-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: transparent;
}

.tjs-gf-app-time-grid-header {
    display: flex;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    z-index: 10;
}

.tjs-gf-app-time-gutter-header {
    width: 60px; /* Width of the time labels column */
    flex-shrink: 0;
}

.tjs-gf-app-grid-header-cell {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tjs-gf-app-grid-header-day {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-grid-header-date {
    font-size: 24px;
    font-weight: 400;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    transition: background-color 0.2s;
    color: var(--tjs-gf-text-primary);
}

.tjs-gf-app-grid-header-cell.is-today .tjs-gf-app-grid-header-day {
    color: var(--tjs-blue-dark);
    font-weight: 700;
}

.tjs-gf-app-grid-header-cell.is-today .tjs-gf-app-grid-header-date {
    background-color: var(--tjs-blue-normal);
    color: var(--tjs-gf-bg-surface);
}

/* Scrollable Body */

.tjs-gf-app-time-grid-body-scroll {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.tjs-gf-app-time-grid-body {
    display: flex;
    position: relative;
    min-height: 1440px; /* 24 * 60px */
}

/* Time Gutter */

.tjs-gf-app-time-gutter {
  width: 60px;
  flex-shrink: 0;
  text-align: center;
  color: var(--tjs-gf-text-primary);
  font-size: 1.2rem;
  font-weight: bolder;
}

.tjs-gf-app-time-slot-label {
    position: relative;
    top: -6px; /* Align text with grid line */
}

/* Columns container */

.tjs-gf-app-grid-columns {
    flex: 1;
    position: relative;
    display: flex;
    padding: 0 var(--tjs-gf-tile-gap);
}

/* Day Columns Flex Container */

.tjs-gf-app-day-columns {
    flex: 1;
    display: flex;
    gap: var(--tjs-gf-tile-gap);
    z-index: 1;
}

/* Header Days Flex Container */

.tjs-gf-app-header-days {
    flex: 1;
    display: flex;
    gap: var(--tjs-gf-tile-gap);
    padding: 0 var(--tjs-gf-tile-gap);
}

/* Day Column Tile */

.tjs-gf-app-day-column {
    flex: 1;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

/* Internal Grid Lines */

.tjs-gf-app-column-grid-lines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.tjs-gf-app-time-tile {
    background: var(--tjs-gf-tile-bg);
    border: var(--tjs-gf-tile-border);
    border-radius: var(--tjs-gf-tile-radius);
    box-sizing: border-box;
}

/* Event Item on Grid */

.tjs-gf-app-grid-event {
    position: absolute;
    /* background-color set inline */
    color: white;
    border-radius: 8px; /* Requested rounded corners */
    padding: 2px 6px;
    font-size: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Requested shadow */
    border: 1px solid rgba(255,255,255,0.4); /* Glassy border */
    backdrop-filter: blur(4px); /* Glass effect */
    transition: z-index 0s, box-shadow 0.2s, transform 0.1s;
}

.tjs-gf-app-grid-event:hover {
    z-index: 5;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: scale(1.02);
}

.tjs-gf-app-grid-slot {
    background-color: var(--tjs-gf-bg-surface);
    border: 1px dashed var(--tjs-gf-primary-color);
    color: var(--tjs-gf-primary-color);
}

.tjs-gf-app-grid-slot:hover {
    background-color: var(--tjs-gf-bg-active);
}

.tjs-gf-app-event-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.tjs-gf-app-event-time {
    font-size: 10px;
    opacity: 0.9;
    white-space: nowrap;
}

/* Closed Intervals Overlay */

.tjs-gf-app-grid-closed {
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(45deg, var(--tjs-gf-bg-hover), var(--tjs-gf-bg-hover) 10px, var(--tjs-gf-bg-surface) 10px, var(--tjs-gf-bg-surface) 20px);
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

/* Active Location Highlight in Sidebar */

.tjs-gf-app-location-active {
    background-color: var(--tjs-blue-light);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--tjs-blue-dark);
    font-weight: 600;
}

/* Day View Specifics */

.tjs-gf-app-time-grid-wrapper.is-day-view .tjs-gf-app-time-gutter-header {
    display: none;
}

.tjs-gf-app-time-grid-wrapper.is-day-view .tjs-gf-app-header-days {
    padding-left: 5rem;
}

.tjs-gf-app-time-grid-wrapper.is-day-view .tjs-gf-app-grid-header-cell {
    flex-direction: row; /* Wochentag left of Date */
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.tjs-gf-app-time-grid-wrapper.is-day-view .tjs-gf-app-grid-header-day {
    font-size: 24px;
    margin-bottom: 0;
}

/* Login View Styles */

.tjs-gf-app-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 20px;
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
}

.tjs-login-wrapper {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.tjs-login-card {
    background: var(--tjs-gf-glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: var(--tjs-gf-glass-border);
    border-radius: var(--tjs-gf-radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    padding: 32px;
    text-align: center;
}

.tjs-form-group {
    margin-bottom: 16px;
    text-align: left;
}

.tjs-form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--tjs-gf-text-primary);
}

.tjs-form-input {
    width: 100%;
    background: var(--tjs-gf-bg-input);
    border-radius: 6px;
    padding: 10px 12px;
    border: 1px solid transparent;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--tjs-gf-text-primary);
}

.tjs-form-input:focus {
    background: var(--tjs-gf-bg-input-hover);
    border-color: var(--tjs-gf-primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
}

.tjs-btn {
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    font-family: inherit;
}

.tjs-btn-primary {
    background-color: var(--tjs-gf-primary-color);
    color: white;
}

.tjs-btn-primary:hover {
    filter: brightness(0.9);
}

.tjs-btn-primary:active {
    transform: scale(0.98);
}

/* Missing utility classes used elsewhere */

.tjs-gf-app-btn-primary {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    background-color: var(--tjs-gf-primary-color);
    color: white;
}

.tjs-gf-app-btn-primary:hover {
    filter: brightness(0.9);
}

.tjs-gf-app-btn-secondary {
    border: 1px solid var(--tjs-gf-border-color);
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    cursor: pointer;
    background-color: var(--tjs-gf-bg-surface);
    color: var(--tjs-gf-text-primary);
    margin-right: 8px;
}

.tjs-gf-app-btn-secondary:hover {
    background-color: var(--tjs-gf-bg-hover);
}

/* AppLinks Sidebar */

.tjs-gf-app-applinks {
    grid-area: applinks;
    background: var(--tjs-gf-header-bg);
    backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255,255,255,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    z-index: 50;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.tjs-gf-app-applinks-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    align-items: center;
}

.tjs-gf-app-applink-item {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: var(--tjs-gf-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.tjs-gf-app-applink-item:hover {
    background: var(--tjs-gf-bg-active);
    color: var(--tjs-gf-primary-color);
}

.tjs-gf-app-applink-item.add-new {
    border: 1px dashed var(--tjs-gf-border-color);
    margin-top: 12px;
}

/* Mobile Tweaks */

@media (max-width: 768px) {
    /* AppLinks Overlay Mode */
    .tjs-gf-app-applinks {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 64px;
        height: 100svh;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 100;
        border-left: 1px solid var(--tjs-gf-border-light);
        background: var(--tjs-gf-header-bg);
        box-shadow: -2px 0 12px rgba(0,0,0,0.1);
        padding-top: calc(var(--tjs-gf-header-height) + 16px);
    }

    .tjs-gf-app-applinks.is-open {
        transform: translateX(0);
    }

    .tjs-gf-app-applinks-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.2);
        backdrop-filter: blur(2px);
        z-index: 90;
        animation: fadeIn 0.3s;
    }

    .tjs-gf-app-sidebar {
        background: var(--tjs-gf-bg-background);
    }
    .tjs-gf-app-shell {
        height: calc(100svh - 1.2rem);
    }
    .tjs-gf-app-week-tiles-container {
        /* flex-direction: column; REMOVED to keep row layout */
        padding-right: 16px; /* Padding for scroll end */
    }
    .tjs-gf-app-day-tile {
        min-height: 120px;
        min-width: 85vw; /* Show mostly one card, peek the next */
        width: 85vw;
        scroll-snap-align: center; /* Snap effect if scroll-snap is used on container */
    }
    .tjs-gf-app-week-body-scroll {
        scroll-snap-type: x mandatory; /* Snap horizontally */
    }
    .tjs-gf-app-date-nav {
        display: none;
    }
    .tjs-gf-app-fab {
        top: auto;
        left: auto;
        bottom: 4.2rem;
        right: 2rem;
        width: 56px;
        height: 56px;
        /* Removed dark gradient overrides */
    }
    .tjs-gf-app-sidebar {
        height: calc(100svh - 4.2rem);
    }
    .tjs-gf-app-header-title {
        padding: 4px;
    }
    .tjs-gf-app-month-name {
        font-size: 1.1rem;
    }

    /* Tweak header padding/gaps for mobile to fit icons */
    .tjs-gf-app-header {
        padding: 0 8px;
        gap: 4px;
    }
    .tjs-gf-app-header-right {
        gap: 2px;
    }
    .tjs-gf-app-icon-btn {
        padding: 6px; /* Reduced padding for mobile */
    }
}

/* Modal Overlay (Missing) */

.tjs-gf-app-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.tjs-gf-app-view-switcher {
    position: relative;
    display: flex;
    align-items: center;
}

/* Planning View Styles (Gantt/Timeline) */

.tjs-gf-app-planning-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    overflow: hidden;
}

.tjs-gf-app-planning-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    margin: 16px;
    background: var(--tjs-gf-glass-bg);
    backdrop-filter: blur(8px);
    border-radius: var(--tjs-gf-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Sidebar for Resources (Left) */

.tjs-gf-app-planning-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid rgba(0,0,0,0.1);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

/* Ensure consistent sizing including borders */

.tjs-gf-app-planning-header-spacer,
.tjs-gf-app-planning-resource-row,
.tjs-gf-app-planning-date-header,
.tjs-gf-app-planning-time-header,
.tjs-gf-app-planning-grid-row,
.tjs-gf-app-planning-time-cell {
    box-sizing: border-box;
}

.tjs-gf-app-planning-header-spacer {
    height: 40px; /* Match timeline header height */
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    padding-left: 16px;
    font-weight: 600;
    color: var(--tjs-gf-text-secondary);
    font-size: 12px;
    text-transform: uppercase;
}

.tjs-gf-app-planning-resources {
    flex: 1;
    overflow-y: auto; /* Allow native scroll for wheel interaction */
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.tjs-gf-app-planning-resources::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.tjs-gf-app-planning-resource-row {
    /* Height is set dynamically inline */
    display: flex;
    align-items: center;
    padding-left: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 13px;
    color: var(--tjs-gf-text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tjs-gf-app-planning-resource-row.type-group { font-weight: 700; color: var(--tjs-gf-text-primary); background: rgba(0,0,0,0.05); }

/* Indentation handled via inline styles for dynamic depth */

/*.tjs-gf-app-planning-resource-row.level-1 { padding-left: 32px; }
.tjs-gf-app-planning-resource-row.level-2 { padding-left: 48px; }*/

/* Timeline Area (Right) */

.tjs-gf-app-planning-timeline {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: auto; /* Allow vertical scroll for both */
    position: relative;
}

/* Sync Scroll Wrapper */

.tjs-gf-app-planning-scroll-area {
    display: flex;
    flex-direction: column;
    min-width: 1200px; /* Force horizontal scroll */
    flex: 1;
}

.tjs-gf-app-planning-time-header {
    height: 40px;
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background: rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tjs-gf-app-planning-time-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0,0,0,0.05);
    font-size: 11px;
    color: var(--tjs-gf-text-secondary);
    font-weight: 500;
}

.tjs-gf-app-planning-grid {
    position: relative;
    flex: 1;
}

.tjs-gf-app-planning-grid-row {
    /* Height is set dynamically inline */
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative;
    /* grid lines removed for tile system */
}

.tjs-gf-app-planning-hour-tile {
    flex-shrink: 0;
    background: var(--tjs-gf-tile-bg);
    border: var(--tjs-gf-tile-border);
    border-radius: var(--tjs-gf-tile-radius);
    box-sizing: border-box;
    /* Sub-slots pattern (15 min intervals) */
    background-image: repeating-linear-gradient(90deg, transparent, transparent calc(25% - 1px), rgba(0,0,0,0.05) calc(25% - 1px), rgba(0,0,0,0.05) 25%);
}

.tjs-gf-app-planning-event {
    position: absolute;
    top: 6px;
    bottom: 6px;
    border-radius: 8px;
    color: white;
    font-size: 11px;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: transform 0.1s, z-index 0.1s;
}

.tjs-gf-app-planning-event:hover {
    z-index: 5;
    transform: scale(1.02);
}

/* Mobile Tweaks for Planning */

@media (max-width: 768px) {
    /* Override Indentation Variables */
    :root {
        --tjs-gf-planning-indent-base: 8px;
        --tjs-gf-planning-indent-step: 10px;
    }

    .tjs-gf-app-planning-container {
        margin: 4px;
        border-radius: 8px;
    }
    .tjs-gf-app-planning-sidebar {
        width: 120px; /* Shrink sidebar */
    }
    .tjs-gf-app-planning-header-spacer {
        font-size: 10px;
    }
    .tjs-gf-app-planning-resource-row {
        font-size: 11px;
        /* padding-left removed here as it is handled via style calc() */
    }
    /* .tjs-gf-app-planning-resource-row.level-1 { padding-left: 16px; }
    .tjs-gf-app-planning-resource-row.level-2 { padding-left: 24px; } */
}

/* Desktop Grid Layout & Sidebar Push */

@media (min-width: 769px) {
    .tjs-gf-app-shell.is-desktop {
        display: grid;
        grid-template-areas:
            "header-left header header-right"
            "sidebar content applinks";
        grid-template-rows: var(--tjs-gf-header-height) 1fr;
        /* Dynamic columns: Closed 0px, Open 280px */
        grid-template-columns: 0px 1fr var(--tjs-gf-applinks-width);
        transition: grid-template-columns 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .tjs-gf-app-shell.is-desktop.sidebar-open {
        grid-template-columns: var(--tjs-gf-sidebar-width) 1fr var(--tjs-gf-applinks-width);
    }

    .tjs-gf-app-header {
        grid-column: 1 / -1;
        display: flex;
        width: 100%;
        z-index: 50;
    }

    /* Header 1: Fixed Width (Sidebar Width) */
    .tjs-gf-app-header-1 {
        position: relative;
        height: var(--tjs-gf-header-height);
        width: var(--tjs-gf-sidebar-width);
        display: flex;
        align-items: center;
        padding-left: 1.2rem;
        flex-shrink: 0;
        /* Ensure background matches to block underlying content if any */
        background: var(--tjs-gf-header-bg);
    }

    /* Header 2: Fills remaining space */
    .tjs-gf-app-header-2 {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 20px;
        background: var(--tjs-gf-header-bg);
        backdrop-filter: blur(10px);
        height: 100%;
    }

    /* Sidebar logic remains mostly same but follows grid col 1 */
    .tjs-gf-app-sidebar {
        grid-area: sidebar;
        position: relative;
        top: auto; left: auto;
        height: 100%;
        transform: none !important;
        width: 100%;
        border-radius: 0;
        background: var(--tjs-gf-glass-bg);
        box-shadow: none;
        overflow: hidden;
        white-space: nowrap;
        /* Sidebar content needs to sit below the Header 1 overlay?
           Header 1 is z-index 80. Sidebar is z-index 60 (default).
           So Header 1 covers top of Sidebar. Correct.
        */
    }

    .tjs-gf-app-sidebar-spacer {
        display: block;
        height: 84px; /* Sufficient to clear Header 1 (64px) + spacing */
        flex-shrink: 0;
    }

    .tjs-gf-app-content {
        grid-area: content;
        width: 100%;
        position: relative;
    }

    /* FAB Changes when Sidebar Open */
    .tjs-gf-app-fab.sidebar-expanded {
        width: 10rem;
        border-radius: 20px;
    }
    .tjs-gf-app-fab.sidebar-expanded::after {
        content: 'Neuer Termin';
        margin-left: 8px;
        font-weight: 500;
        font-size: 14px;
        white-space: nowrap;
    }

    /* View Switcher Button */
    .tjs-gf-app-view-btn {
        display: flex;
        align-items: center;
        background: linear-gradient(135deg,var(--tjs-gf-glass-shadow),var(--tjs-blue-light));
        color: var(--tjs-blue-dark);
        border: none;
        padding: 8px 16px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 500;
        font-size: 14px;
        box-shadow: 0 6px 7px var(--tjs-blue-dark);
        transition: all 0.2s;
        margin-right: 12px;
    }
    .tjs-gf-app-view-btn:hover {
        box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3);
        transform: translateY(-1px);
    }
    .tjs-gf-app-view-btn-icon {
        margin-right: 8px;
        display: flex;
        align-items: center;
    }

    /* View Dropdown */
    .tjs-gf-app-view-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        background: var(--tjs-gf-glass-bg);
        backdrop-filter: blur(12px);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        border: 1px solid rgba(255,255,255,0.8);
        padding: 8px;
        z-index: 100;
        min-width: 200px;
        display: flex;
        flex-direction: column;
    }

    .tjs-gf-app-view-item {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        color: var(--tjs-gf-text-primary);
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        transition: background 0.2s;
    }
    .tjs-gf-app-view-item:hover {
        background-color: var(--tjs-gf-bg-hover);
    }
    .tjs-gf-app-view-item.active {
        background-color: var(--tjs-gf-bg-active);
        color: var(--tjs-gf-primary-color);
    }
    .tjs-gf-app-view-item-icon {
        margin-right: 12px;
        display: flex;
        align-items: center;
    }

    /* Mini Calendar in Sidebar styling */
    .tjs-gf-app-sidebar-calendar-wrapper {
        padding: 20px;
    }

    .mode-structure .tjs-gf-app-sidebar-calendar-wrapper,
    .mode-governance .tjs-gf-app-sidebar-calendar-wrapper {
        padding: 0 20px 20px;
    }

    .tjs-gf-app-month-name {
        font-size: 2rem;
    }

    /* Toggle Button Position Fix:
       It is now inside .tjs-gf-app-header-1 which has padding-left: 1.2rem.
       The button itself should be static relative to that.
    */
    .tjs-gf-app-menu-toggle {
        position: static;
        /* top/left/z-index removed as handled by parent */
    }
}

/* Booking Modal Redesign (Google Calendar Style) */

.tjs-gf-app-booking-modal {
    width: 448px; /* Approx standard Google modal width */
    max-width: 95vw;
    background: var(--tjs-gf-bg-modal);
    padding: 0;
    border-radius: 28px;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
    border: none;
    overflow: hidden;
    font-family: 'Google Sans', Roboto, Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

.tjs-gf-app-modal-header-area {
    background: var(--tjs-gf-bg-modal);
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
}

.tjs-gf-app-drag-handle {
    font-size: 20px;
    color: var(--tjs-gf-text-secondary);
    cursor: grab;
    user-select: none;
    padding: 4px;
}

.tjs-gf-app-close-icon {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--tjs-gf-text-secondary);
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.tjs-gf-app-close-icon:hover {
    background-color: var(--tjs-gf-bg-hover);
}

.tjs-gf-app-modal-content {
    padding: 0 24px 24px;
    flex: 1;
    overflow-y: auto;
}

/* Title Section */

.tjs-gf-app-title-section {
    margin-left: 48px; /* Align with content column */
    margin-bottom: 20px;
}

.tjs-gf-app-title-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--tjs-gf-border-color);
    font-size: 22px;
    padding: 8px 0;
    margin-bottom: 12px;
    background: transparent;
    color: var(--tjs-gf-text-primary);
    transition: border-bottom-color 0.2s;
    border-radius: 0;
}

.tjs-gf-app-title-input:focus {
    outline: none;
    border-bottom: 2px solid var(--tjs-gf-primary-color);
}

.tjs-gf-app-title-input::placeholder {
    color: var(--tjs-gf-text-secondary);
}

.tjs-gf-app-type-badge {
    display: inline-block;
    background-color: #c2e7ff; /* Google Blue Light */
    color: #001d35;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

/* Row Layout */

.tjs-gf-app-row {
    display: flex;
    margin-bottom: 16px;
    align-items: flex-start;
}

.tjs-gf-app-icon-col {
    width: 48px;
    display: flex;
    justify-content: flex-start;
    padding-top: 10px; /* Align with input text baseline roughly */
}

.tjs-gf-app-row-icon {
    font-size: 24px;
    color: var(--tjs-gf-text-secondary);
}

.tjs-gf-app-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40px; /* Standard row height */
}

/* Time Summary */

.tjs-gf-app-time-summary {
    cursor: pointer;
    padding: 8px 0;
    border-radius: 4px;
    transition: background-color 0.1s;
}

.tjs-gf-app-time-summary:hover {
    background-color: var(--tjs-gf-bg-hover);
    margin: 0 -8px;
    padding: 8px 8px;
}

.tjs-gf-app-time-text {
    font-size: 16px;
    color: var(--tjs-gf-text-primary);
    margin-bottom: 4px;
}

.tjs-gf-app-time-subtext {
    font-size: 12px;
    color: var(--tjs-gf-text-secondary);
}

/* Expanded Time Edit */

.tjs-gf-app-time-expanded {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.tjs-gf-app-expanded-input {
    background: var(--tjs-gf-bg-active);
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--tjs-gf-text-primary);
    font-family: inherit;
    transition: background-color 0.2s;
}

.tjs-gf-app-expanded-input:focus {
    background: var(--tjs-blue-dark);
    outline: none;
    color: var(--tjs-gf-primary-color);
}

.tjs-gf-app-expanded-input:hover {
    background-color: var(--tjs-gf-bg-hover);
}

.tjs-gf-app-date-input-wrapper {
    display: flex;
}

.tjs-gf-app-expanded-input.tjs-date-picker {
    flex: 1; /* Or fixed width if preferred */
    max-width: 220px;
}

.tjs-gf-app-time-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tjs-gf-app-expanded-input.tjs-time-picker {
    width: 80px;
    text-align: center;
}

.tjs-gf-app-time-options {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: var(--tjs-gf-text-primary);
    align-items: center;
}

.tjs-gf-app-link {
    color: var(--tjs-gf-primary-color);
    cursor: pointer;
    font-weight: 500;
}

.tjs-gf-app-mini-select {
    background: var(--tjs-gf-bg-input);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--tjs-gf-text-primary);
}

/* Other Inputs */

.tjs-gf-app-inline-input, .tjs-gf-app-inline-select {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--tjs-gf-text-primary);
    padding: 8px 0;
    font-family: inherit;
    border-bottom: 1px solid transparent;
    border-radius: 0;
}

.tjs-gf-app-inline-input::placeholder {
    color: var(--tjs-gf-text-secondary);
}

.tjs-gf-app-inline-input:focus, .tjs-gf-app-inline-select:focus {
    outline: none;
    background: var(--tjs-gf-bg-input-hover);
    border-bottom: 1px solid var(--tjs-gf-primary-color);
    margin: 0 -8px;
    padding: 8px 8px;
    width: calc(100% + 16px);
    border-radius: 4px;
}

.tjs-gf-app-inline-input:hover, .tjs-gf-app-inline-select:hover {
     background-color: var(--tjs-gf-bg-hover);
     margin: 0 -8px;
     padding: 8px 8px;
     width: calc(100% + 16px);
     border-radius: 4px;
}

.tjs-gf-app-placeholder-text {
    color: var(--tjs-gf-text-secondary);
    font-size: 16px;
    padding: 8px 0;
}

.tjs-gf-app-helper-text {
    font-size: 12px;
    color: var(--tjs-gf-text-secondary);
    margin-top: 2px;
}

/* Meta Row (Calendar/User) */

.tjs-gf-app-meta-row {
    font-size: 14px;
    color: var(--tjs-gf-text-primary);
    gap: 2px;
}

.tjs-gf-app-meta-user {
    font-weight: 500;
}

.tjs-gf-app-meta-status {
    font-size: 12px;
    color: var(--tjs-gf-text-secondary);
}

/* Footer */

.tjs-gf-app-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    gap: 12px;
}

.tjs-gf-app-btn-text {
    background: transparent;
    border: none;
    color: var(--tjs-gf-primary-color);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background 0.2s;
}

.tjs-gf-app-btn-text:hover {
    background: rgba(66, 133, 244, 0.08);
}

.tjs-gf-app-btn-save {
    background-color: #0b57d0; /* Google Darker Blue */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.tjs-gf-app-btn-save:hover {
    background-color: #0842a0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.tjs-gf-app-btn-save:disabled {
    background-color: #dadce0;
    color: #fff;
    cursor: default;
    box-shadow: none;
}

/* Update Time Tile to be a Flex container for sub-slots */

.tjs-gf-app-time-tile {
    display: flex;
    flex-direction: column;
    /* Reset background as sub-slots handle it */
    background: transparent;
    overflow: hidden; /* Ensure rounded corners clip sub-slots */
}

/* Sub-slots */

.tjs-gf-app-time-subslot {
    flex: 1;
    border-bottom: 1px solid rgba(0,0,0,0.03); /* Light divider */
    background-color: var(--tjs-gf-tile-bg); /* Default white */
}

/* Remove border from last sub-slot to rely on container border */

.tjs-gf-app-time-subslot:last-child {
    border-bottom: none;
}

/* Closed state on sub-slots */

.tjs-gf-app-time-subslot.is-closed {
    background: repeating-linear-gradient(45deg, var(--tjs-gf-bg-hover), var(--tjs-gf-bg-hover) 10px, var(--tjs-gf-tile-bg) 10px, var(--tjs-gf-tile-bg) 20px);
    opacity: 0.7;
}

/* Date Header in Planning View */

.tjs-gf-app-planning-date-header {
    height: 30px;
    width: 100%; /* Spans the full width of the scroll area */
    background: var(--tjs-gf-header-bg);
    border-bottom: 1px solid var(--tjs-gf-border-light);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 12; /* Above time header (10) */
    /* Ensure background is visible */
    backdrop-filter: blur(4px);
}

.tjs-gf-app-planning-date-label {
    position: sticky;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 600;
    color: #3c4043;
    background: transparent;
    padding: 0 16px;
    white-space: nowrap;
}

/* Adjust Time Header to sit below Date Header */

.tjs-gf-app-planning-time-header {
    top: 30px; /* Height of date header */
}

/* Adjust Sidebar Header Spacer to match total header height */

.tjs-gf-app-planning-header-spacer {
    height: 70px; /* 30px (Date) + 40px (Time) */
}

/* Force CSS Build Sync */

/* Subdivisions (Shares) Styling in Planning View */

.tjs-gf-app-planning-resource-row.type-share {
    background-color: rgba(0,0,0,0.01);
    color: #5f6368;
    font-size: 12px;
    /* height controlled dynamically */
}

.tjs-gf-app-planning-resource-row.is-expanded {
    background-color: rgba(0,0,0,0.03);
    font-weight: 600;
}

/* Add indent line for hierarchy visual if needed */

.tjs-gf-app-planning-resource-row {
    transition: background-color 0.2s, height 0.2s;
    position: relative;
}

.tjs-gf-app-planning-resource-row.type-share::before {
    content: '';
    position: absolute;
    left: 20px; /* Adjust based on indent */
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(0,0,0,0.05);
}

/* Seamless multi-share events */

.tjs-gf-app-planning-event.is-share-top,
.tjs-gf-app-planning-event.is-share-middle,
.tjs-gf-app-planning-event.is-share-bottom {
    z-index: 2; /* Ensure it covers grid lines */
    box-shadow: none; /* Remove shadow to merge visually */
}

/* Re-apply shadow to the whole block?
   It's hard because they are separate elements.
   Maybe just remove shadow for internal edges?
   Or keeps shadow on left/right but remove top/bottom?
*/

.tjs-gf-app-planning-event.is-share-top {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Keep shadow */
    clip-path: inset(-4px -4px 0 -4px); /* Clip bottom shadow? No, simplistic approach first */
}

/* Closed Overlay for Planning View */

.tjs-gf-app-planning-closed-overlay {
    background: repeating-linear-gradient(45deg, var(--tjs-gf-bg-hover), var(--tjs-gf-bg-hover) 10px, var(--tjs-gf-tile-bg) 10px, var(--tjs-gf-tile-bg) 20px);
    pointer-events: none; /* Allow clicks to pass through to grid (drag create) */
    opacity: 0.6;
}

/* Admin Big Buttons */

.tjs-btn-large-blue, .tjs-btn-large-green, .tjs-btn-large-red {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 8px;
    margin-bottom: 8px;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.tjs-btn-large-blue { background-color: var(--tjs-blue-normal); }

.tjs-btn-large-blue:hover { background-color: var(--tjs-blue-dark); transform: translateY(-2px); }

.tjs-btn-large-green { background-color: var(--tjs-gf-success-color); }

.tjs-btn-large-green:hover { filter: brightness(0.9); transform: translateY(-2px); }

.tjs-btn-large-red { background-color: var(--tjs-gf-danger-color); }

.tjs-btn-large-red:hover { filter: brightness(0.9); transform: translateY(-2px); }

.tjs-btn-icon-large {
    font-size: 24px;
    margin-bottom: 4px;
}

/* Detail Header Buttons */

.tjs-detail-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
    margin-left: 8px;
}

.tjs-detail-btn:hover { background-color: rgba(0,0,0,0.05); }

.tjs-detail-btn.is-dirty { color: var(--tjs-gf-success-color); }

/* Green */

.tjs-detail-btn.is-clean { color: #ccc; }

/* Grey */

.tjs-detail-btn.is-delete { color: var(--tjs-gf-danger-color); }

/* Red */

.tjs-detail-btn.is-delete-disabled { color: #ccc; cursor: default; }

/* Glass Buttons (from Structure Admin) */

.tjs-btn-glass {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #333;
    /* width: 100%; removed width: 100% to allow auto width in modal footer */
    text-align: center;
    box-sizing: border-box;
}

.tjs-btn-glass:hover {
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.tjs-btn-glass:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tjs-btn-glass.primary {
    background: #1967d2;
    color: white;
    border-color: #1967d2;
}

.tjs-btn-glass.primary:hover {
    background: #185abc;
    box-shadow: 0 2px 5px rgba(25, 103, 210, 0.3);
}

.tjs-btn-glass.danger {
    color: var(--tjs-gf-danger-color);
    background: rgba(217, 48, 37, 0.05); /* Keep base bg low opacity, could use var but needs rgb transform */
    border-color: var(--tjs-gf-danger-color);
    opacity: 0.9;
}

.tjs-btn-glass.danger:hover {
    background: rgba(217, 48, 37, 0.1);
    opacity: 1;
}

/* Time Dependent Layout */

.tjs-time-dependent-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.tjs-td-master {
    flex-shrink: 0;
    width: 100%;
    z-index: 10;
}

.tjs-td-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.tjs-td-timeline {
    height: 80px; /* Fixed height for timeline visualization */
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    overflow-x: auto;
    flex-shrink: 0;
}

.tjs-td-details {
    flex: 1;
    overflow-y: auto;
    background: white;
}

/* Timeline Control */

.tjs-timeline-control {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    min-width: 100%;
}

.tjs-timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
    min-width: 120px;
    height: 50px;
    position: relative;
    user-select: none;
    border: 1px solid transparent;
}

.tjs-timeline-period {
    background: var(--tjs-gf-bg-surface);
    border: 1px solid var(--tjs-gf-border-color);
    color: var(--tjs-gf-text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.tjs-timeline-period:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 5;
}

.tjs-timeline-period.is-selected {
    background: #e8f0fe;
    border-color: #4285f4;
    color: #1967d2;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(66, 133, 244, 0.2);
}

.tjs-timeline-gap {
    background: repeating-linear-gradient(
        45deg,
        var(--tjs-gf-bg-hover),
        var(--tjs-gf-bg-hover) 10px,
        var(--tjs-gf-bg-background) 10px,
        var(--tjs-gf-bg-background) 20px
    );
    border: 1px dashed var(--tjs-gf-border-color);
    color: var(--tjs-gf-text-secondary);
    opacity: 0.8;
}

.tjs-timeline-gap:hover {
    opacity: 1;
    background: #f1f3f4; /* Solid on hover to indicate action */
    border-color: #4285f4;
    color: #4285f4;
}

.tjs-timeline-gap span {
    font-weight: 600;
}

.tjs-timeline-gap small {
    font-size: 10px;
    opacity: 0.8;
}

.tjs-timeline-date {
    font-family: monospace;
    font-size: 11px;
}

.tjs-timeline-arrow {
    font-size: 10px;
    color: #9aa0a6;
    margin: 2px 0;
}

.tjs-timeline-period.is-selected .tjs-timeline-arrow {
    color: #4285f4;
}

/* Generic Timeline (Ported from Structure) */

.tjs-timeline-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.tjs-timeline-line {
    width: 100%;
    height: 2px;
    background: #000;
    position: relative;
}

.tjs-timeline-label {
    position: absolute;
    top: 22px;
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
}

.tjs-timeline-label.start { left: 0; }

.tjs-timeline-label.end { right: 0; }

.tjs-timeline-marker {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 12px;
    background: #aaa;
    transform: translateY(-50%);
}

.tjs-timeline-marker-label {
    position: absolute;
    font-size: 0.7rem;
    color: #666;
    white-space: nowrap;
    transform: translateX(-50%);
}

.tjs-timeline-marker-label.top {
    bottom: 22px;
}

.tjs-timeline-marker-label.bottom {
    top: 22px;
}

.tjs-timeline-current-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: left 0.1s ease-out;
    z-index: 10;
}

.tjs-timeline-current-marker.is-dragging {
    transition: none;
}

.tjs-timeline-current-marker .marker-line {
    width: 2px;
    background: var(--tjs-gf-danger-color);
    flex: 1;
}

.tjs-timeline-current-marker .marker-knob {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tjs-gf-danger-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px white;
    pointer-events: auto;
    cursor: grab;
}

.tjs-timeline-current-marker .marker-knob:active {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.2);
}

/* Timeline Blocks (Gantt style visualization of periods) */

.tjs-timeline-block {
    position: absolute;
    height: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(66, 133, 244, 0.3);
    border-radius: 2px;
    pointer-events: none;
}

.tjs-timeline-block.active {
    background: rgba(66, 133, 244, 0.8);
    height: 8px;
    z-index: 1;
}

/* Time Dependent Columns */

.tjs-td-editor {
    /* Override or ensure flex row */
    flex-direction: row !important; /* Force row layout for columns */
    overflow-x: auto; /* Allow horizontal scroll if many columns */
}

.tjs-td-column {
    flex: 1;
    min-width: 400px; /* Minimum width per column */
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e0e0e0;
    position: relative;
    background: white;
}

.tjs-td-column:last-child {
    border-right: none;
}

.tjs-td-column-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    background: #fdfdfd;
}

.tjs-td-column-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #3c4043;
}

.tjs-td-column-timeline {
    height: 80px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    overflow-x: auto;
    flex-shrink: 0;
}

.tjs-td-column-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Glass Column Styling */

.tjs-td-column {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    margin: 8px; /* Spacing between columns */
    border-radius: 16px; /* Rounded glass cards */
    overflow: hidden; /* rounded corners */
}

.tjs-td-column-header {
    background: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default; /* Desktop default */
}

/* Timeline Background in Glass */

.tjs-td-column-timeline {
    background: rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.tjs-td-column-content {
    background: transparent; /* content sits on glass */
}

/* Collapse Toggle Icon */

.tjs-td-collapse-icon {
    font-size: 1.2rem;
    color: #5f6368;
    transition: transform 0.3s;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
}

.tjs-td-collapse-icon:hover {
    background: rgba(0,0,0,0.05);
}

.tjs-td-collapse-icon.collapsed {
    transform: rotate(-90deg);
}

/* Structure View Desktop Collapsible Columns */

.tjs-structure-app-new-layout .tjs-td-column-header {
    cursor: pointer;
}

.tjs-structure-app-new-layout .tjs-td-column.is-collapsed .tjs-td-column-timeline,
.tjs-structure-app-new-layout .tjs-td-column.is-collapsed .tjs-td-column-content {
    display: none;
}

.tjs-structure-app-new-layout .tjs-td-column.is-collapsed {
    min-width: 0;
    flex: 0 0 auto;
    width: auto;
}

/* Mobile Responsive & Collapsible */

@media (max-width: 768px) {
    .tjs-td-editor {
        flex-direction: column !important;
        overflow-x: hidden;
        overflow-y: auto;
        padding-bottom: 2rem;
    }

    .tjs-td-column {
        min-width: 0; /* Allow shrinking */
        width: auto;
        margin: 0 0 12px 0;
        flex: 0 0 auto; /* Don't stretch infinitely */
        border-radius: 12px;
    }

    .tjs-td-column-header {
        cursor: pointer; /* Clickable header for collapse */
        padding: 1rem;
    }

    /* Hide body when collapsed */
    .tjs-td-column.is-collapsed .tjs-td-column-timeline,
    .tjs-td-column.is-collapsed .tjs-td-column-content {
        display: none;
    }
}

/* Delete Button in Column Header */

.tjs-td-delete-btn {
    background: rgba(234, 67, 53, 0.1);
    border: none;
    color: var(--tjs-gf-danger-color);
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1rem;
}

.tjs-td-delete-btn:hover {
    background: rgba(234, 67, 53, 0.2);
    transform: scale(1.05);
}

/* Action Portal Wrapper & Layout */

.tjs-actions-portal-wrapper {
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* DESKTOP OPEN: Integrated in Sidebar */

.tjs-actions-portal-wrapper.desktop.sidebar-open {
    position: absolute;
    top: calc(var(--tjs-gf-header-height) + 20px); /* Below header */
    left: 0;
    width: var(--tjs-gf-sidebar-width);
    z-index: 65; /* Above Sidebar Background (60), below Modals */
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Fake Sidebar Section Header to match look */

.tjs-actions-portal-header {
    font-size: 12px;
    color: #70757a;
    margin-bottom: 12px;
    font-weight: 500;
}

/* Adjust Sidebar Spacer when actions are present */

/* Since the wrapper is absolute over the sidebar, we need to push sidebar content down.
   We can use the existing spacer or add padding to sidebar nav via CSS targeting.
   But sidebar content is inside .tjs-gf-app-sidebar which is overflow-y auto.
   If we put actions OVER it, they might cover content if scrolled?
   Wait, if we use 'integrated' look, they should SCROLL with sidebar?
   If position: absolute, they DON'T scroll.
   Requirement: "integrated in the group 'Aktionen'". Usually implies part of the list.
   However, my implementation places them absolutely over the sidebar area to persist the DOM node.
   To prevent overlap, we need to make sure the sidebar content starts LOWER.
   We can adjust .tjs-gf-app-sidebar-spacer height or padding.
   Since we can't easily change CSS based on React state without a class on body/parent,
   we rely on .sidebar-open class on shell.
   BUT, this wrapper is only there for Structure mode.
   Structure mode replaces sidebar content with a Tree.
   We can push the Tree down.
*/

.tjs-gf-app-shell.sidebar-open .tjs-gf-app-sidebar-nav {
   /* If structure mode actions are present, we might need more top padding.
      But this selector is generic.
      Ideally, we'd want the actions to just be IN the sidebar.
      But we pulled them out to support the "floating when closed" requirement without unmounting.
      Let's set a fixed background for the actions so they cover content scrolling under?
      Or just accept they are sticky at top. Sticky top actions are good.
   */
}

.tjs-actions-portal-wrapper.desktop.sidebar-open {
    /* Ensure background matches sidebar */
    /* Sidebar bg is transparent/glass. We should match or be transparent. */
    /* pointer-events auto */
}

/* DESKTOP CLOSED: Floating Square Buttons Left */

.tjs-actions-portal-wrapper.desktop.sidebar-closed {
    position: fixed;
    top: calc(var(--tjs-gf-header-height) + 20px);
    left: 0;
    width: 60px; /* Narrow strip */
    z-index: 70; /* Above collapsed sidebar/content */
    padding: 10px;
    gap: 10px;
    align-items: center;
}

/* MOBILE: Floating Square Buttons Bottom Right */

.tjs-actions-portal-wrapper.mobile {
    position: fixed;
    bottom: 5rem; /* Above FAB usually, or replacing it */
    right: 1.5rem;
    z-index: 80; /* High z-index */
    flex-direction: column-reverse; /* Stack upwards */
    gap: 12px;
    align-items: flex-end;
}

/* Button Styling Transformations */

/* Default Button (Open State) */

.tjs-structure-actions-list .tjs-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

/* Closed/Mobile State: Square Buttons */

.tjs-actions-portal-wrapper.sidebar-closed .tjs-btn,
.tjs-actions-portal-wrapper.mobile .tjs-btn {
    width: 48px !important; /* Force square */
    height: 48px;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Hide Label in Closed/Mobile states */

.tjs-actions-portal-wrapper.sidebar-closed .tjs-btn .tjs-btn-label,
.tjs-actions-portal-wrapper.mobile .tjs-btn .tjs-btn-label {
    display: none;
}

/* Ensure Icon is centered and visible */

.tjs-actions-portal-wrapper.sidebar-closed .tjs-btn .tjs-btn-icon,
.tjs-actions-portal-wrapper.mobile .tjs-btn .tjs-btn-icon {
    margin: 0 !important;
    font-size: 20px;
}

/* Add tooltips/titles are native HTML title attr, which works for hover */

/* Specific Colors for Floating Buttons to pop */

.tjs-actions-portal-wrapper.mobile .tjs-btn-glass {
    background: white;
    border: none;
}

/* If sidebar is open on Mobile, Sidebar overlay (z-55) and sidebar (z-60) are shown.
   Our mobile buttons are z-80.
   Requirement: "floating between Content and SideBar".
   Content is z-0/1. Sidebar is z-60. Buttons should be < z-60?
   If Sidebar is open, buttons should be hidden or behind?
   "between Content and SideBar".
   So z-index should be around 40 or 50.
   Sidebar is z-60.
   Let's set z-index: 55 (same as overlay) or 50.
   */

.tjs-actions-portal-wrapper.mobile {
    z-index: 52;
}

/* Note: Fab is z-60. Sidebar is z-60. Header z-50. */

/* Adjust Sidebar Spacer when App Actions are present (Desktop Open) */

/* The Portal Wrapper is absolute over the sidebar content.
   We need to push the internal sidebar content down to avoid overlap.
   The sidebar content is typically .tjs-gf-app-calendar-section or similar.
   We can target .tjs-gf-app-sidebar.is-open > .tjs-gf-app-calendar-section
   IF we are in an app mode that has actions.
   However, CSS can't detect 'App Mode' easily unless we put a class on the shell.
   AppLayout knows the mode. Let's rely on the user adding a class or inline style.
   Wait, I didn't add a mode class to the shell in my previous edit.
   Let's check AppLayout.jsx again.
   <div className={`tjs-gf-app-shell ${isDesktop ? 'is-desktop' : ''} ${sidebarVisible ? 'sidebar-open' : ''}`}>
   I should add the mode class to the shell.
*/

/* Assuming I will add 'mode-{currentMode}' to the shell in the next step */

.tjs-gf-app-shell.mode-structure.sidebar-open .tjs-gf-app-sidebar .tjs-gf-app-sidebar-spacer,
.tjs-gf-app-shell.mode-sport.sidebar-open .tjs-gf-app-sidebar .tjs-gf-app-sidebar-spacer,
.tjs-gf-app-shell.mode-members.sidebar-open .tjs-gf-app-sidebar .tjs-gf-app-sidebar-spacer,
.tjs-gf-app-shell.mode-governance.sidebar-open .tjs-gf-app-sidebar .tjs-gf-app-sidebar-spacer,
.tjs-gf-app-shell.mode-framework.sidebar-open .tjs-gf-app-sidebar .tjs-gf-app-sidebar-spacer ,
.tjs-gf-app-shell.mode-calendar.sidebar-open .tjs-gf-app-sidebar .tjs-gf-app-sidebar-spacer {
    /* Height of the actions block.
       Actions block: top: calc(header + 20px).
       Plus content height (approx 150px for 3 buttons + header + divider).
       The standard spacer is 84px.
       We need to increase this significantly or add padding-top to the first content child.
       The Spacer is displayed block.
       Let's increase its height.
       Header (64) + 20 padding + Actions Height.
       Actions Height ~ 3 * 36px + 20px gaps + 20px header = ~150px.
       Total top offset needed inside the sidebar scroll area?
       Wait, the Actions Wrapper is ABSOLUTE relative to the Shell (or Body), positioned over the Sidebar.
       The Sidebar has overflow-y: auto.
       The spacer is the first element in the sidebar flow (on desktop).
       If we increase spacer height, content pushes down.
       But the spacer scrolls with content? Yes.
       If the Actions are FIXED/ABSOLUTE over the sidebar, they stay there.
       So we need the spacer to be tall enough so the first item is visible below the actions.
       Height = (Actions Wrapper Bottom Y) - (Sidebar Top Y).
       Sidebar Top Y = Header Height (since sidebar starts below header visually? No, it's full height but under header).
       Sidebar Spacer usually clears the header.
       We need to clear Header + Actions.
       Header = 64px.
       Actions start at 84px.
       Actions height ~ 160px.
       Total Spacer = 84px + 160px = 244px.
    */
    height: 200px !important;
}

/* For Apps with fewer buttons (Members = 1 button), height is less. */

.tjs-gf-app-shell.mode-members.sidebar-open .tjs-gf-app-sidebar .tjs-gf-app-sidebar-spacer {
    height: 160px !important; /* 64 + 20 + 40 + 20 */
}

/* Framework Planning Styles */

.tjs-gf-app-planning-event.is-draft {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.3) 10px, rgba(255,255,255,0.3) 20px);
}

.tjs-gf-app-planning-event.is-active-draft {
    box-shadow: 0 0 0 1px #fff inset;
    font-weight: bold;
}

/* Governance App Tabs (Pill Style) */

.tjs-gf-app-orgatab-btn {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 20px;
    padding: 8px 16px;
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    white-space: nowrap;
}

.tjs-gf-app-orgatab-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.tjs-gf-app-orgatab-btn.active {
    background: #e8f0fe;
    color: #1967d2;
    border-color: rgba(66, 133, 244, 0.2);
    box-shadow: 0 2px 4px rgba(66, 133, 244, 0.2);
}

.tjs-gf-app-orgatab-icon {
    margin-right: 8px;
    font-size: 16px;
    display: flex;
    align-items: center;
}

/* Header Governance Mobile Dropdown */

.tjs-gf-app-governance-dropdown {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: var(--tjs-gf-radius-lg);
    box-shadow: var(--tjs-gf-glass-shadow);
    border: 1px solid rgba(255,255,255,0.8);
    padding: 8px;
    z-index: 100;
    width: 200px;
    animation: slideDown 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tjs-gf-app-governance-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #3c4043;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    transition: background 0.2s;
}

.tjs-gf-app-governance-item:hover {
    background-color: #f1f3f4;
}

.tjs-gf-app-governance-item.active {
    background-color: #e8f0fe;
    color: var(--tjs-gf-primary-color);
}

/* Gantt View Styles */

.tjs-gf-app-gantt-view .booking-block:hover {
    opacity: 0.9;
    z-index: 10 !important;
    border-color: #000 !important;
}

/* Governance Content */

.tjs-gf-app-governance-content {
    flex: 1;
    overflow: hidden;
    padding: 0 2rem 2rem 2rem; /* Desktop Padding */
}

/* Mobile Tweaks */

@media (max-width: 768px) {
    /* ... existing mobile tweaks ... */

    /* Override Governance padding for full width on mobile */
    .tjs-gf-app-governance-content {
        padding: 0 0 2rem 0; /* Minimized padding, only bottom for FAB clearance if needed */
    }

    .tjs-gf-app-structure-container {
        margin: 4px; /* Minimize outer container margin too */
        /* If using full width, margin might be 0? But typically we want a tiny edge or 0 */
        margin: 0;
        width: 100%;
        gap: 0;
    }
}

/* Current Time Indicator */

.tjs-gf-app-time-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #ea4335;
    z-index: 20;
    pointer-events: none;
}

.tjs-gf-app-time-indicator::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ea4335;
}

.tjs-gf-app-planning-time-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #ea4335;
    z-index: 20;
    pointer-events: none;
}

/* Login Page Specifics */

.tjs-gf-app-container.tjs-login-page {
    background-image: url('../fry_logo_.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    min-height: 100vh;
	background-size: contain;
}

.tjs-login-copyright {
    font-size: 0.75rem; /* Very small */
    text-align: center;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    font-weight: 500;
}