/* =========================================================
   CENTERGY — GLOBAL BASICS
   ========================================================= */

.hero-image{
  width:100%;
  max-width:600px;
  height:auto;
  margin:10px 0;
}

.jumbotron,
header.jumbotron{
  text-align:center;
}

header.jumbotron{
  padding:20px 0;
}

.acronym{
  margin:10px 0;
}

.acronym .large-letter{
  font-size:48px;
  font-weight:700;
}

.acronym .small-text{
  font-size:14px;
  vertical-align:middle;
}

@media (max-width:768px){
  .acronym .large-letter{font-size:24px;}
  .acronym .small-text{font-size:12px;}
}

.btn-lg{
  margin-top:20px;
}

.navbar-nav .nav-item.active .nav-link{
  font-weight:700;
  cursor:default;
}

/* =========================================================
   CENTERGY — WORKSPACE SHELL (Header Stack + Tabs + Panel)
   Used across app pages: Learning Hub, Journal, Habits, Notes, etc.
   Requires:
     - header_stack.html above
     - .menu-shell wrapper around the menu strip (tabs)
     - .app-shell wrapper around the page content
   ========================================================= */

:root{
  --ce-shell-bg:#dbeafe;      /* blue-100 */
  --ce-shell-border:#bfdbfe;  /* blue-200 */
  --ce-shell-tuck:-0.35rem;   /* how much the panel tucks under tabs */
  --ce-shell-radius:0.75rem;
}

/* Tabs wrapper: allows full-bleed on mobile, aligned on sm+ */
.menu-shell{
  margin-left:-0.5rem;
  margin-right:-0.5rem;
  border-radius:var(--ce-shell-radius) var(--ce-shell-radius) 0 0;
}

@media (min-width:640px){
  .menu-shell{
    margin-left:0;
    margin-right:0;
  }
}

/* The strip itself should meet the shell cleanly */
.menu-shell .menu-strip{
  margin-bottom:0;
  padding-bottom:0;
  border-radius:var(--ce-shell-radius) var(--ce-shell-radius) 0 0;
}

/* Active tab underline should blend into the blue panel */
.hlink[aria-current="page"]{
  border-bottom-color:var(--ce-shell-bg);
}

/* Main blue panel under tabs */
.app-shell{
  background:var(--ce-shell-bg);
  border:1px solid var(--ce-shell-border);
  border-top:none;
  margin-top:var(--ce-shell-tuck);
  padding:1rem 0.85rem 1rem;

  /* Default: square top corners, rounded bottom corners */
  border-radius:0 0 var(--ce-shell-radius) var(--ce-shell-radius);
}

@media (min-width:768px){
  .app-shell{
    padding:1rem 1.25rem 1.25rem;
  }
}

/* Optional variant: fully flat shell (Learning Hub style)
   Use: <div class="app-shell shell-flat"> ... */
.app-shell.shell-flat{
  border-radius:0;
}

/* Page header row inside app-shell */
.page-header{
  display:flex;
  align-items:center;
  gap:0.6rem;
  margin:0 0 0.5rem;
}

.page-header .h1{
  font-weight:800;
  font-size:1.25rem;
  margin:0;
}

.page-header .hicon{
  border:none;
  background:transparent;
  color:#6b7280;
  padding:0.3rem;
  border-radius:0.5rem;
  cursor:pointer;
}

.page-header .hicon:hover{
  color:#374151;
  background:#f3f4f6;
}

.page-header .hicon i{
  font-size:0.8rem;
}
/* =========================================================
   CENTERGY — STANDARD ROW ACTIONS (edit / delete / drag)
   Goal: same look/placement on every page + device
   Works with:
     .edit-btn, .delete-btn, .drag-handle
   As used in user_dashboard.html:
     <div class="flex justify-between items-start">
       <span class="content-text ...">...</span>
       <div class="flex items-center gap-2 ml-2">
         <button class="edit-btn ...">✏️</button>
         <button class="delete-btn ...">🗑️</button>
         <span class="drag-handle">☰</span>
       </div>
     </div>
   ========================================================= */

:root{
  --ce-action-size: 34px;     /* tap target size (mobile safe) */
  --ce-action-gap: 6px;       /* spacing between actions */
  --ce-action-radius: 10px;
  --ce-action-border: #e5e7eb;
  --ce-action-bg: #ffffff;
  --ce-action-hover: #f8fafc;
  --ce-action-text: #475569;  /* slate */
  --ce-action-danger: #dc2626;/* red */
}

/* Make any action cluster behave consistently */
.ce-actions,
.actions-cluster,
.row-actions,
li [class*="actions"],
li .flex.items-center.gap-2.ml-2{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap: var(--ce-action-gap) !important;
  flex: 0 0 auto !important;
  margin-left: .5rem !important;
}

/* Normalize buttons + drag handle into same “pill-square” */
.edit-btn,
.delete-btn,
.drag-handle{
  width: var(--ce-action-size);
  height: var(--ce-action-size);
  min-width: var(--ce-action-size);
  min-height: var(--ce-action-size);

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius: var(--ce-action-radius);
  border: 1px solid var(--ce-action-border);
  background: var(--ce-action-bg);

  line-height: 1 !important;
  font-size: 16px !important;      /* consistent feel even if emoji varies */
  text-decoration:none;
  user-select:none;

  /* reduce “emoji bounce” */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Buttons should look like buttons even if page has Tailwind text colors */
.edit-btn{
  color: var(--ce-action-text) !important;
}
.delete-btn{
  color: var(--ce-action-danger) !important;
}

/* Drag handle should clearly be draggable */
.drag-handle{
  cursor: grab;
  color: var(--ce-action-text);
  font-weight: 900;
}
.drag-handle:active{ cursor: grabbing; }

/* Hover / focus states */
.edit-btn:hover,
.delete-btn:hover,
.drag-handle:hover{
  background: var(--ce-action-hover);
}
.edit-btn:focus,
.delete-btn:focus,
.drag-handle:focus{
  outline: 2px solid rgba(37, 99, 235, .25);
  outline-offset: 2px;
}

/* Keep the content column from hiding under the action rail */
.content-text{
  min-width: 0;                /* allows wrapping correctly in flex */
  padding-right: .25rem;
}

/* If your row uses items-start, align action rail to top consistently */
li .flex.justify-between.items-start .drag-handle,
li .flex.justify-between.items-start .edit-btn,
li .flex.justify-between.items-start .delete-btn{
  margin-top: 0px;
}

/* Optional: slightly smaller actions on very small screens */
@media (max-width: 360px){
  :root{ --ce-action-size: 32px; }
}
/* =========================================================
   DASHBOARD DENSITY OVERRIDES (less scroll, no dot wrap, clearer links)
   Paste at VERY BOTTOM of static/css/centergy.css
   ========================================================= */

/* 1) Make row actions more compact (saves vertical + horizontal room) */
:root{
  --ce-action-size: 28px;     /* was 34 */
  --ce-action-gap: 5px;
  --ce-action-radius: 9px;
}

/* Ensure the action cluster doesn't force extra height */
.edit-btn,
.delete-btn,
.drag-handle{
  width: var(--ce-action-size);
  height: var(--ce-action-size);
  min-width: var(--ce-action-size);
  min-height: var(--ce-action-size);
  font-size: 14px !important;
  padding: 0 !important;
}

/* 2) Centered dots: NEVER wrap + tighter spacing */
.centered-dots{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: .28rem !important;          /* tighter */
  overflow: hidden;                /* prevents ugly wrap */
}
.cdot{ width: 11px; height: 11px; } /* slightly smaller */
.cdot-label{ margin-left: .25rem; }

/* On tiny screens, keep the dots on one line by letting the left side shrink */
.centered-meter .centered-left{ min-width: 0; }
.centered-meter .centered-sub{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3) Links that look like plain text -> make them “control pills” */
a.linkish,
button.linkish,
#openManageFocus,
#openManageFocus2,
#browseStockBtn,
a[href*="Pick from stock"],
a[href*="Browse stock"]{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  text-decoration: none !important;
  font-weight: 900;
  font-size: .78rem;
  line-height: 1;
}
a.linkish:hover,
button.linkish:hover,
#openManageFocus:hover,
#openManageFocus2:hover,
#browseStockBtn:hover{
  background: #f8fafc;
}
/* Fix real-phone button rendering quirks (iOS/Android) */
.ce-pill-btn{
  -webkit-appearance: none;
  appearance: none;
  opacity: 1;
  -webkit-text-fill-color: currentColor; /* iOS can gray text unexpectedly */
}