/* 
   heyGrafiker - Dedicated Isolated Mobile Stylesheet
   Activates ONLY on mobile viewports (<= 768px) and when desktop mode is not forced.
   Desktop layout is completely preserved.
*/

.mobile-desktop-switcher {
  display: none;
}

@media (max-width: 768px) {
  body:not(.desktop-forced) {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* 1. TOP HEADER (MOBILE) */
  body:not(.desktop-forced) .grafiker-top-header {
    height: 48px;
    min-height: 48px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    z-index: 1000;
  }

  body:not(.desktop-forced) .grafiker-brand-title {
    font-size: 0.92rem;
    margin-right: 2px;
  }

  /* Hide non-essential desktop header buttons */
  body:not(.desktop-forced) #header-file-btn,
  body:not(.desktop-forced) #top-team-badge,
  body:not(.desktop-forced) .header-edit-mode-wrapper,
  body:not(.desktop-forced) .header-menu-btn,
  body:not(.desktop-forced) #top-guest-pill span:first-of-type,
  body:not(.desktop-forced) #top-donate-btn {
    display: none !important;
  }

  body:not(.desktop-forced) .top-right-section {
    gap: 4px;
  }

  body:not(.desktop-forced) .btn-top-cta {
    padding: 0 7px;
    font-size: 0.72rem;
    height: 28px;
  }

  body:not(.desktop-forced) .btn-top-cta span {
    display: none;
  }

  body:not(.desktop-forced) .btn-top-cta i {
    font-size: 0.85rem;
    margin: 0;
  }

  body:not(.desktop-forced) #top-guest-pill {
    padding: 2px 6px;
    font-size: 0.68rem;
  }

  /* Desktop Switcher placed in top-right without blocking canvas */
  body:not(.desktop-forced) .mobile-desktop-switcher {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 14px;
    cursor: pointer;
  }

  /* 2. WORKSPACE BODY & STAGE */
  body:not(.desktop-forced) .grafiker-workspace-body {
    position: relative;
    width: 100vw;
    height: calc(100vh - 48px - 56px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Main center column taking 100% available viewport */
  body:not(.desktop-forced) .grafiker-center-column {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
  }

  /* Sub-toolbar (Object & Text controls above canvas) */
  body:not(.desktop-forced) .grafiker-sub-toolbar {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 2px 6px !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--grafiker-border) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    align-items: center !important;
    z-index: 100 !important;
  }

  body:not(.desktop-forced) .grafiker-sub-toolbar::-webkit-scrollbar {
    display: none;
  }

  body:not(.desktop-forced) .sub-toolbar-pill {
    gap: 3px !important;
    padding: 2px !important;
  }

  body:not(.desktop-forced) .sub-tool-btn {
    padding: 3px 6px !important;
    font-size: 0.72rem !important;
    height: 28px !important;
  }

  /* Viewport Container: holds artboard centered */
  body:not(.desktop-forced) .grafiker-viewport-container {
    flex: 1 1 auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100% - 38px) !important;
    padding: 10px 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: var(--grafiker-bg) !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  body:not(.desktop-forced) .grafiker-viewport-stage-wrapper {
    margin: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:not(.desktop-forced) .grafiker-pages-stage-track {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:not(.desktop-forced) .grafiker-page-block {
    align-items: center !important;
    margin: 0 auto !important;
  }

  body:not(.desktop-forced) .grafiker-stage-header {
    width: 100% !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  /* Hide right layers panel on mobile */
  body:not(.desktop-forced) .grafiker-right-layers-panel {
    display: none !important;
  }

  /* 3. MOBILE BOTTOM NAVIGATION (Transforms Left Rail into 5 Tabs) */
  body:not(.desktop-forced) .grafiker-icon-rail {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 56px;
    z-index: 1200;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    background: #ffffff;
    border-top: 1px solid var(--grafiker-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  body:not(.desktop-forced) .grafiker-icon-rail::-webkit-scrollbar {
    display: none;
  }

  body:not(.desktop-forced) .rail-btn {
    width: 20% !important;
    max-width: 20% !important;
    min-width: 0 !important;
    flex: 1 1 20% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px;
    border: none;
    background: transparent;
    padding: 4px 2px !important;
    margin: 0 !important;
    color: var(--grafiker-text-muted);
    border-top: 2px solid transparent;
  }

  body:not(.desktop-forced) .rail-btn i {
    font-size: 1.15rem;
    margin-bottom: 2px;
  }

  body:not(.desktop-forced) .rail-btn span {
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
  }

  body:not(.desktop-forced) .rail-btn.active {
    color: var(--grafiker-purple) !important;
    border-top-color: var(--grafiker-purple) !important;
    background: #fff7ed !important;
  }

  /* Show only 5 core tabs: Templates, Elements (Ekle), Uploads, Projects, Account */
  body:not(.desktop-forced) #rail-btn-text,
  body:not(.desktop-forced) #rail-btn-inspiration,
  body:not(.desktop-forced) #rail-btn-activity,
  body:not(.desktop-forced) #rail-btn-shared,
  body:not(.desktop-forced) #rail-btn-apps,
  body:not(.desktop-forced) #rail-btn-team,
  body:not(.desktop-forced) #rail-btn-donate {
    display: none !important;
  }

  body:not(.desktop-forced) #rail-btn-elements span {
    font-size: 0 !important;
  }

  body:not(.desktop-forced) #rail-btn-elements span::after {
    content: 'Ekle';
    font-size: 0.65rem !important;
    font-weight: 600;
  }

  /* Hide side add page card on mobile so canvas centers cleanly */
  body:not(.desktop-forced) .grafiker-add-page-card {
    display: none !important;
  }

  /* Mobile add-page button located below canvas */
  body:not(.desktop-forced) .mobile-add-page-btn {
    display: inline-flex !important;
    align-items: center;
    background: #ffffff;
    color: var(--grafiker-purple);
    border: 1px solid var(--grafiker-border);
    font-weight: 700;
  }

  /* 4. SLIDE-UP BOTTOM SHEET (Transforms Side Drawer) */
  body:not(.desktop-forced) .grafiker-drawer {
    position: fixed !important;
    left: 0 !important;
    bottom: 56px !important;
    width: 100vw !important;
    height: 60vh !important;
    max-height: 65vh !important;
    background: #ffffff !important;
    z-index: 1250 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Collapsed drawer state (starts collapsed on mobile) */
  body:not(.desktop-forced) .grafiker-drawer.collapsed {
    transform: translateY(115%) !important;
    pointer-events: none !important;
  }

  body:not(.desktop-forced) .drawer-collapse-toggle {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 6px;
    background: #cbd5e1;
    border-radius: 4px;
    border: none;
    box-shadow: none;
    cursor: pointer;
  }

  body:not(.desktop-forced) .drawer-collapse-toggle i {
    display: none;
  }

  body:not(.desktop-forced) .drawer-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }

  body:not(.desktop-forced) .drawer-pane {
    width: 100%;
  }

  body:not(.desktop-forced) .template-grid,
  body:not(.desktop-forced) #drawer-templates-list,
  body:not(.desktop-forced) #uploads-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  body:not(.desktop-forced) .preset-size-card {
    padding: 8px !important;
    font-size: 0.75rem !important;
  }

  /* 5. HIDE DESKTOP BOTTOM BAR */
  body:not(.desktop-forced) .grafiker-bottom-bar {
    display: none !important;
  }

  /* 6. RESPONSIVE MODALS */
  body:not(.desktop-forced) .modal-box {
    max-width: 94vw !important;
    width: 94vw !important;
    margin: auto;
    max-height: 88vh;
    overflow-y: auto;
    padding: 16px !important;
    border-radius: 14px !important;
  }
}