/* ==================================================
FILE : /assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w04-toolsarea-adaptor.css
LINK : <link rel="stylesheet" href="/assets/01-mstr-tmplet/04-jz-mobile/css-v2/mobile-w04-toolsarea-adaptor.css">
PURPOSE : MOBILE WIDGET 04 - Tools Staging Area (Placeholder Container)
VERSION: v1.0 - DATE CREATED : 2026-04-07 - Rebuild - New Typography Architecture
==================================================== */

/* ==================================================
   🛠️ BRAT TWEAKS: LOCAL OVERRIDES & WIRING
   ================================================== */
.jz-mob-w04-wrapper {
  /* --- MASTER SPACING HOOKS --- */
  --mob-margin-top: var(--mob-w04-margin-top, 5px);
  --mob-margin-bottom: var(--mob-w04-margin-bottom, 5px);

  --mob-w04-master-pad: 15px; /* <-- Brat Tweak: Padding inside the staging area */
  --mob-w04-min-height: 200px; /* <-- Brat Tweak: Height of the empty box for testing */

  /* --- MASTER CONTAINER RGB --- */
  --active-mob-rgb-speed: var(--mob-w04-rgb-speed, 15s);
  --active-mob-rgb-colors: var(--mob-w04-rgb-colors);
}

/* ==================================================
   SECTION 1: THE MASTER GLASS WRAPPER
   ================================================== */
.jz-mob-w04-wrapper {
  width: 100%;
  max-width: var(--mob-max-width) !important;
  box-sizing: border-box;
  display: block !important;

  /* Layout Logic */
  margin-top: var(--mob-margin-top) !important;
  margin-bottom: var(--mob-margin-bottom) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.jz-mob-w04-rgb-box {
  width: 100%;
  min-height: var(--mob-w04-min-height); 
  padding: var(--mob-w04-master-pad) !important;
  box-sizing: border-box;

  /* Flex properties to dead-center placeholder text */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2; /* Keeps content above the RGB mask */
}

/* ==================================================
   SECTION 2: TEMPORARY PLACEHOLDER CONTENT
   ================================================== */
.jz-mob-w04-staging-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.5; /* Dimmed slightly to indicate it's a placeholder */
  user-select: none;
}

.jz-mob-w04-temp-icon {
  font-size: 2.5rem; /* Large icon for visibility */
  margin-bottom: 10px;
}

.jz-mob-w04-temp-text {
  font-family: var(--jzn-active-heading-font); /* Heading Router */
  font-size: var(--jzn-size-h3) !important; /* Widget/Card Title Size */
  font-weight: var(--jzn-font-weight-heading);
  color: var(--mob-heading-color);
  letter-spacing: 1px;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.jz-mob-w04-temp-sub {
  font-family: var(--jzn-active-font); /* Body Router */
  font-size: var(--jzn-size-sub) !important; /* Helper text size */
  font-weight: var(--jzn-font-weight-sub);
  color: var(--mob-subtext-color);
  text-transform: uppercase;
  letter-spacing: 2px;
}