/* ==========================================================
   Delhi25 · App Shell UI Kit
   File: static/css/app/shell.css

   Shared UI kit for:
   - Accounts/Profile
   - Workspace (/run)

   Depends on: core/base.css + core/layout.css + core/inner.css
   ========================================================== */

/* ----------------------------------------------------------
   Section scope (keeps it app-only, not for public pages)
   ---------------------------------------------------------- */
.d25-page--account,
.d25-page--workspace,
.d25-page--workspace-find,
.d25-page--workspace-stub,
.d25-page--wsMedia{
  --acc-max: 1200px;
  --acc-pad-top: 34px;
  --acc-pad-bot: 70px;
}

/* ----------------------------------------------------------
   Container
   ---------------------------------------------------------- */
.d25-acc{
  width: min(92vw, var(--acc-max));
  margin: 0 auto;
  padding: var(--acc-pad-top) 0 var(--acc-pad-bot);
}

.d25-acc--work{
  padding-top: 28px;
}

/* ----------------------------------------------------------
   Header / Top area
   ---------------------------------------------------------- */
.d25-acc-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.d25-acc-title{
  margin: 0;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--grey-10);
}

.d25-acc-meta{
  margin: 6px 0 0;
  color: var(--grey-07);
  font-size: 14px;
  line-height: 1.45;
}

.d25-acc-actions{
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ----------------------------------------------------------
   Buttons (shared)
   ---------------------------------------------------------- */
.d25-btn{
  appearance: none;
  background: #fff;
  color: var(--grey-09);
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--grey-02);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
  user-select: none;
  white-space: nowrap;
}

.d25-btn:hover{
  border-color: var(--grey-06);
  background: var(--grey-01);
  transform: translateY(-2px);
}

.d25-btn:active{ transform: translateY(0); }

.d25-btn.is-primary{
  background: var(--grey-10);
  color: #fff;
  border-color: var(--grey-10);
}

.d25-btn.is-primary:hover{
  background: var(--grey-09);
  border-color: var(--grey-09);
}

.d25-btn.is-danger{
  border-color: #ffd5d5;
  background: #fff;
  color: #b00020;
}

.d25-btn.is-danger:hover{
  background: #fff5f5;
  border-color: #ffc2c2;
}

.d25-btn.is-ghost{
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

.d25-btn.is-ghost:hover{
  background: var(--grey-01);
  border-color: var(--grey-02);
}

/* Icon+text helper */
.d25-btnIcon{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.d25-btnIcon .material-symbols-outlined{
  font-size: 18px;
  line-height: 1;
}

/* ----------------------------------------------------------
   Cards / Rows
   ---------------------------------------------------------- */
/* NOTE:
   inner.css uses .d25-card for public “universal cards”.
   For app pages, use .d25-shellCard in templates. */
.d25-shellCard{
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 40px;
  margin-bottom: 40px;
}

/* Kept for backward compatibility (avoid removing abruptly) */
.d25-card{
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  padding: 40px;
  margin-bottom: 40px;
}

.d25-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.d25-row--head{ align-items: center; }

.d25-subtext{
  margin: 6px 0 0;
  font-size: 1rem;
  color: var(--grey-07);
}

/* ----------------------------------------------------------
   Shell layout (nav + main)
   ---------------------------------------------------------- */
.d25-shell{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

.d25-shell__nav{
  position: sticky;
  top: 90px;
  align-self: start;
}

.d25-shell__main{ min-width: 0; }

/* Workspace pages often have no nav */
.d25-page--workspace .d25-shell,
.d25-page--workspace-find .d25-shell,
.d25-page--workspace-stub .d25-shell,
.d25-page--wsMedia .d25-shell{
  grid-template-columns: 1fr;
}

/* ----------------------------------------------------------
   Item rows (phones, addresses, list items)
   ---------------------------------------------------------- */
.d25-itemRow{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--grey-02);
}

.d25-itemRow:first-of-type{
  border-top: 0;
  padding-top: 0;
}

.d25-itemRow__main{ min-width: 0; }

.d25-itemRow__actions{
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.d25-prof-link{
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--grey-09);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.d25-prof-link:hover{
  color: var(--grey-10);
}

/* ----------------------------------------------------------
   Unified Form System (app)
   ---------------------------------------------------------- */
.d25-form{ display: grid; gap: 12px; }

.d25-field{ display: grid; gap: 8px; }

.d25-label{
  color: var(--grey-08);
  font-size: 1rem;
}

/* Use for “pill” fields in account pages */
.d25-input{
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  border: 1px solid var(--grey-02);
  box-shadow: var(--shadow-1);
  background: #fff;
  color: var(--grey-10);
  outline: none;
  line-height: 1;
}

.d25-input:focus{
  border-color: var(--grey-06);
}

.d25-input.is-soft{
  background: var(--grey-01);
}

.d25-help{
  margin: 0;
  font-size: .9rem;
  color: var(--grey-06);
}

.d25-err{
  margin: 0;
  color: #b00020;
  font-size: 13px;
}

.d25-formActions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* grids */
.d25-grid2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* alert box used by forms */
.d25-alert{
  border: 1px solid #ffd5d5;
  background: #fff5f5;
  color: #8a0018;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 860px){
  .d25-shell{ grid-template-columns: 1fr; }
  .d25-shell__nav{ position: static; }
}

@media (max-width: 640px){
  .d25-grid2{ grid-template-columns: 1fr; }
}