/* =========================================
   App Sidebar + Content Layout (Pro, Mobile-Ready)
   Compatible with django-cookiecutter base.html
   ========================================= */

/* 1) Global fixes for mobile viewport + no horizontal scroll */
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Use dynamic viewport height where supported (prevents iOS 100vh bugs) */
:root{
  /* layout */
  --sidebar-collapsed: 55px;
  --sidebar-expanded: 220px;
  --sidebar-expanded-mobile: clamp(220px, 85vw, 340px);

  /* colors */
  --sidebar-bg: #ffffff;
  --sidebar-border: #e9ecef;
  --sidebar-link: #212529;
  --sidebar-link-hover-bg: #f1f3f5;
  --sidebar-shadow: 0 8px 30px rgba(0,0,0,.12);

  /* motion */
  --sidebar-ease: cubic-bezier(.22,.61,.36,1);
  --sidebar-speed: .2s;

  /* z-index */
  --z-sidebar: 1040;
  --z-backdrop: 1035;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  :root{ --sidebar-speed: 0s; }
}

/* 2) Sidebar (fixed rail) */
.app-sidebar{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-collapsed);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: none;
  transition: width var(--sidebar-speed) var(--sidebar-ease),
              box-shadow var(--sidebar-speed) var(--sidebar-ease);
  z-index: var(--z-sidebar);
  will-change: width;
  padding-left: env(safe-area-inset-left);
}

.app-sidebar .sidebar-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Header (brand + pin) */
.sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem .75rem;
  border-bottom:1px solid var(--sidebar-border);
}

.brand{
  display:inline-flex; align-items:center; gap:.25rem;
  text-decoration:none; color: inherit; min-width: 0;
}
.brand-icon{ font-size: 1.25rem; line-height: 1; }
.brand-text{
  opacity:0; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;
  transition:opacity var(--sidebar-speed) var(--sidebar-ease);
}

.btn-toggle-pin{
  border: 1px solid var(--sidebar-border);
  background: #f8f9fa;
  border-radius: .375rem;
  line-height: 1;
  padding: .375rem .5rem;
  cursor: pointer;
  max-width: 32px;
  font-size: 10px;
  font-weight: 700;
}

/* Nav list */
.sidebar-nav{
  padding: .5rem 0;
  overflow-x: hidden;           /* sidebar list can scroll if long */
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  scrollbar-width: thin;
}
.sidebar-nav::-webkit-scrollbar{ width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 4px; }

.sidebar-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.625rem .75rem;
  text-decoration:none; color: var(--sidebar-link);
  border-radius:.5rem;
  margin: 0 6px;
  min-height: 44px;           /* mobile-friendly target */
}
.sidebar-link:hover{ background: var(--sidebar-link-hover-bg); text-decoration:none; }

.sidebar-link .icon{
  width: 1.25rem; text-align:center; flex: 0 0 1.25rem;
}
.sidebar-link .label{
  opacity:0; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;
  transition: opacity var(--sidebar-speed) var(--sidebar-ease);
}

/* Footer inside sidebar */
.sidebar-footer{
  flex: 0 0 auto;
  padding:.5rem .25rem .75rem .25rem;
  border-top:1px solid var(--sidebar-border);
  background: var(--sidebar-bg);
}

/* Hover expand for devices that support hover */
@media (hover: hover){
  .app-sidebar:hover{
    width: var(--sidebar-expanded);
    box-shadow: var(--sidebar-shadow);
  }
  .app-sidebar:hover .brand-text,
  .app-sidebar:hover .sidebar-link .label{
    opacity:1;
  }
}

/* Pinned state (JS toggles body.sidebar-pinned) */
body.sidebar-pinned .app-sidebar{
  width: var(--sidebar-expanded);
  box-shadow: var(--sidebar-shadow);
}
body.sidebar-pinned .brand-text,
body.sidebar-pinned .sidebar-link .label{
  opacity:1;
}

/* 3) Main content container (keeps at least rail width) */
.app-content{
  margin-left: var(--sidebar-collapsed);
  transition: margin-left var(--sidebar-speed) var(--sidebar-ease);
  /* Use dynamic viewport height where available */
  min-height: 100dvh;
  min-height: 100vh; /* fallback */
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;          /* enables sticky header/footer inside */
  flex-direction: column; /* header, main, footer vertical */
}

/* Shift content only on large screens when pinned */
@media (min-width: 992px){
  body.sidebar-pinned .app-content{
    margin-left: var(--sidebar-expanded);
  }
  body.sidebar-pinned .app{
    left: var(--sidebar-expanded) !important;
  }
}

/* 4) Inner page structure (optional but recommended) */
.page{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.app-header{ flex: 0 0 auto; }
.app-main{
  flex: 1 1 auto;
  min-height: 0;         /* critical so child can scroll */
  overflow: auto;        /* center scrolls if needed */
  -webkit-overflow-scrolling: touch;
}
.app-footer{ flex: 0 0 auto; }

/* 5) Mobile behavior (overlay, no page scroll when open) */
@media (max-width: 991.98px){
  /* rail stays narrow by default */
  .app-sidebar{ width: var(--sidebar-collapsed); }

  /* when opened/pinned, overlay content with a larger width */
  body.sidebar-pinned .app-sidebar{
    width: var(--sidebar-expanded-mobile);
  }

  .app{ left: var(--sidebar-collapsed); }
  body.sidebar-pinned .app{ left: var(--sidebar-collapsed); } /* stay put under overlay */

  /* content never shifts on mobile (overlay only) */
  .app-content{ margin-left: var(--sidebar-collapsed); }
  body.sidebar-pinned .app-content{ margin-left: var(--sidebar-collapsed); }

  /* prevent background page scroll when sidebar is open */
  body.sidebar-pinned{
    overflow: hidden;
    touch-action: none;
  }

  /* dim background when open; backdrop is clickable if you handle it in JS */
  body.sidebar-pinned::before{
    content: "";
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: var(--z-backdrop);
  }
}

/* 6) RTL support (optional) */
html[dir="rtl"] .app-sidebar{
  left: auto; right: 0;
  border-right: none; border-left: 1px solid var(--sidebar-border);
  padding-left: 0; padding-right: env(safe-area-inset-right);
}
html[dir="rtl"] .app-content{
  margin-left: 0; margin-right: var(--sidebar-collapsed);
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}
@media (min-width: 992px){
  html[dir="rtl"] body.sidebar-pinned .app-content{
    margin-right: var(--sidebar-expanded);
  }
}

/* 7) Polish */
.app-sidebar, .sidebar-link, .btn-toggle-pin{
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.app-sidebar .sidebar-link .label{ max-width: 100%; }
.sidebar-nav{ scroll-padding-top: .5rem; scroll-padding-bottom: .75rem; }
.sidebar-link.is-active{
  background: var(--sidebar-link-hover-bg);
  font-weight: 600;
}

/* rtl support */
html[dir="rtl"] .app{
  left: 0; right: var(--sidebar-collapsed);
}
@media (min-width: 992px){
  html[dir="rtl"] body.sidebar-pinned .app{
    right: var(--sidebar-expanded);
  }
}
@media (max-width: 991.98px){
  html[dir="rtl"] .app,
  html[dir="rtl"] body.sidebar-pinned .app{
    right: var(--sidebar-collapsed);
  }
}

/* make sure the sidebar visually sits above the board */
.app { z-index: 1; }

/* === Tiny helpers you likely want === */
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;}
button.btn-close{appearance:none;border:0;background:none;line-height:1;}


/* ========================================
   Beautiful inline "Add workspace" form
   ======================================== */

.add-workspace-form {
  width: 100%;
  padding: 0 .5rem .75rem .5rem;
  animation: fadeIn 0.2s ease-out;
}

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

/* inner layout */
.add-ws-inner {
  display: flex;
  gap: .25rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: .25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: all .2s ease;
}

.add-ws-inner:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* text input */
.add-ws-inner input[type="text"] {
  flex: 1;
  border: none;
  background: transparent;
  padding: .4rem .5rem;
  font-size: .875rem;
  color: #212529;
  outline: none;
  border-radius: .4rem;
}

.add-ws-inner input::placeholder {
  color: #999;
}

/* Submit button below the inline add-workspace form */
.add-ws-submit {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: .5rem .75rem;
  background: #0d6efd;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: .4rem;
  cursor: pointer;
  font-size: .85rem;
  transition: background .2s ease;
}

.add-ws-submit:hover {
  background: #0b5ed7;
}

.add-ws-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}


/* Smooth show/hide */
.add-workspace-form[hidden] {
  display: none !important;
}


/* Hide buttons when sidebar is closed and not pinned */
body:not(.sidebar-pinned) #app-sidebar .toggle-add-ws {
  display: none !important;
}

/* Show when sidebar is hovered (i.e. open) OR pinned */
body.sidebar-pinned #app-sidebar .toggle-add-ws,
body:not(.sidebar-pinned) #app-sidebar:hover .toggle-add-ws {
  display: block !important;
}


.modal {
  z-index: 1055 !important;
}

.modal-backdrop {
  z-index: 1050 !important;
}


/* Workspace list item */
.ws-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
}

/* The clickable workspace link */
.ws-link {
  flex: 1;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* The workspace title should truncate, not push layout */
.ws-title {
  display: inline-block;
  max-width: 120px;            /* ← Adjust sidebar width here */
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Share button */
.ws-share-btn {
  border: none;
  background: transparent;
  color: #6c757d;              /* Bootstrap muted */
  padding: 2px 4px;
  margin-left: 6px;
  cursor: pointer;
  font-size: 14px;
}

.ws-share-btn:hover {
  color: #0d6efd;              /* Primary blue */
}


.share-workspace-btn{
  position: relative;
    margin-left: -30px !important
}

.workspace-link-a-tag{
  width: 180px;
}