/* public/assets/ideas.css
   Scoped styles: ONLY inside .ideas-ui
   Приведено к утверждённому светлому воздушному стилю сайта
   Breakpoints:
   - Mobile: <=720px (base)
   - Tablet: 721–900px
   - Desktop: >=901px
*/

.ideas-ui{
  --ui-bg: transparent;
  --ui-surface: rgba(255,255,255,.72);
  --ui-surface-2: rgba(255,255,255,.80);

  --ui-text: #0f172a;
  --ui-muted: rgba(15,23,42,.66);
  --ui-faint: rgba(15,23,42,.50);

  --ui-border: rgba(181,194,222,.28);
  --ui-border-soft: rgba(181,194,222,.22);

  --ui-primary: var(--theme-color, #0088cc);
  --ui-primary-ink: #ffffff;

  --ui-ok: #16a34a;
  --ui-warn: #f59e0b;
  --ui-danger: #dc2626;

  --ui-radius: 18px;
  --ui-radius-sm: 14px;

  --ui-shadow-soft:
    0 8px 20px rgba(71,85,105,.045),
    inset 0 1px 0 rgba(255,255,255,.54);
  --ui-shadow:
    0 14px 28px rgba(71,85,105,.06),
    inset 0 1px 0 rgba(255,255,255,.60);

  --ui-gap-1: 8px;
  --ui-gap-2: 12px;
  --ui-gap-3: 16px;
  --ui-gap-4: 20px;

  --ui-pad-1: 10px;
  --ui-pad-2: 12px;
  --ui-pad-3: 16px;
  --ui-pad-4: 20px;

  color: var(--ui-text);
  overflow-x: hidden;
}

.ideas-ui,
.ideas-ui *{
  box-sizing: border-box;
}

.ideas-ui img{
  max-width:100%;
  height:auto;
  display:block;
}

.ideas-ui a{
  color:inherit;
  text-decoration:none;
}

.ideas-ui a:hover{
  text-decoration:none;
}

.ideas-ui :where(h1,h2,h3,h4){
  margin:0;
  line-height:1.15;
  letter-spacing:-.01em;
}

.ideas-ui :where(p, ul, ol){
  margin:0;
  padding:0;
}

.ideas-ui :where(ul, ol){
  list-style:none;
}

.ideas-ui :where(.muted){
  color: var(--ui-muted);
}

.ideas-ui :where(.ui-break){
  min-width:0;
  overflow-wrap:anywhere;
  word-break: break-word;
}

/* Page shell */
.ideas-ui .ideas-page{
  width: 100%;
  max-width: var(--container, 1440px);
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 14px;
}

.app-main:not(.container) .ideas-ui .ideas-page{
  padding-left: calc(var(--gutter, 16px) + var(--safe-area-inset-x, 0px));
  padding-right: calc(var(--gutter, 16px) + var(--safe-area-inset-x, 0px));
}

@media (min-width:721px){
  .ideas-ui .ideas-page{
    padding-top: 14px;
    padding-bottom: 16px;
  }
}

@media (min-width:901px){
  .ideas-ui .ideas-page{
    padding-top: 16px;
    padding-bottom: 18px;
  }
}

/* Header */
.ideas-ui .ideas-header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: var(--ui-gap-3);
  margin-bottom: var(--ui-gap-3);
}

.ideas-ui .ideas-title{
  font-weight: 1000;
  font-size: 1.3rem;
  color: #163b67;
  letter-spacing: -.02em;
}

.ideas-ui .ideas-subtitle{
  margin-top: 6px;
  color: var(--ui-muted);
  line-height: 1.4;
}

.ideas-ui .ideas-actions{
  display:flex;
  gap: var(--ui-gap-2);
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-end;
}

@media (max-width:720px){
  .ideas-ui .ideas-header{
    flex-direction: column;
    align-items: stretch;
  }

  .ideas-ui .ideas-actions{
    justify-content: flex-start;
  }
}

/* Card */
.ideas-ui .card{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-soft);
  overflow:hidden;
  min-width:0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ideas-ui .form-card{
  padding: var(--ui-pad-3);
}

.ideas-ui .idea-view{
  padding: var(--ui-pad-3);
}

.ideas-ui .card.empty{
  padding: var(--ui-pad-3);
  color: var(--ui-muted);
  text-align:center;
  border-style: dashed;
  background: rgba(255,255,255,.48);
}

/* Alerts */
.ideas-ui .alert{
  border: 1px solid rgba(181,194,222,.24);
  background: rgba(255,255,255,.56);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: rgba(15,23,42,.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ideas-ui .alert-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.ideas-ui .alert ul{
  display:grid;
  gap: 6px;
}

.ideas-ui .alert li{
  color: rgba(15,23,42,.85);
}

.ideas-ui .alert-success{
  border-color: rgba(16,185,129,.20);
  background: rgba(236,253,245,.72);
  color: rgba(6,95,70,.95);
}

.ideas-ui .alert-danger{
  border-color: rgba(220,38,38,.18);
  background: rgba(254,242,242,.72);
  color: rgba(153,27,27,.95);
}

/* Buttons */
.ideas-ui :where(.btn-primary, .btn-ghost, .btn-like){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-weight: 900;
  font-size: .95rem;
  line-height: 1;
  cursor:pointer;
  user-select:none;
  min-height: 40px;
  white-space: nowrap;
  transition:
    transform .08s ease,
    box-shadow .14s ease,
    background .14s ease,
    border-color .14s ease,
    filter .14s ease,
    color .14s ease;
}

.ideas-ui .btn-primary:active,
.ideas-ui .btn-ghost:active,
.ideas-ui .btn-like:active{
  transform: translateY(1px);
}

.ideas-ui .btn-primary{
  background: linear-gradient(180deg, var(--ui-primary), #006fa8);
  color: var(--ui-primary-ink);
  box-shadow: 0 10px 18px rgba(0,136,204,.16);
}

.ideas-ui .btn-primary:hover{
  filter: brightness(1.02);
}

.ideas-ui .btn-ghost{
  background: rgba(255,255,255,.58);
  border-color: rgba(181,194,222,.24);
  color: var(--ui-text);
}

.ideas-ui .btn-ghost:hover{
  background: rgba(255,255,255,.70);
  border-color: rgba(167,188,221,.32);
}

.ideas-ui .btn-like{
  background: rgba(255,255,255,.56);
  border-color: rgba(181,194,222,.24);
  color: var(--ui-text);
}

.ideas-ui .btn-like:hover{
  background: rgba(255,255,255,.68);
  border-color: rgba(167,188,221,.30);
}

.ideas-ui .btn-like.liked{
  border-color: rgba(0,136,204,.22);
  background: rgba(239,246,255,.72);
  color: rgba(0,136,204,.96);
}

.ideas-ui .btn-like.disabled,
.ideas-ui .btn-like:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Forms */
.ideas-ui .idea-form{
  display:grid;
  gap: var(--ui-gap-3);
}

.ideas-ui .field{
  display:grid;
  gap: 8px;
}

.ideas-ui .field label{
  font-weight: 900;
  font-size: .92rem;
  color: rgba(15,23,42,.90);
}

.ideas-ui .hint{
  font-size: .85rem;
  color: var(--ui-muted);
}

.ideas-ui :where(input[type="text"], textarea, select){
  width:100%;
  border: 1px solid rgba(181,194,222,.34);
  background: rgba(255,255,255,.84);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 16px;
  outline:none;
  min-height: 42px;
  color: var(--ui-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.ideas-ui textarea{
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}

.ideas-ui :where(input, textarea, select):focus{
  border-color: rgba(0,136,204,.28);
  box-shadow: 0 0 0 4px rgba(0,136,204,.08);
  background: rgba(255,255,255,.92);
}

.ideas-ui .form-actions{
  display:flex;
  gap: var(--ui-gap-2);
  flex-wrap: wrap;
  align-items:center;
}

@media (max-width:720px){
  .ideas-ui .form-actions{
    display:grid;
    grid-template-columns: 1fr;
  }

  .ideas-ui .form-actions :where(a,button){
    width:100%;
  }
}

/* Filters */
.ideas-ui .ideas-filters{
  padding: var(--ui-pad-3);
  margin-bottom: var(--ui-gap-3);
  background: rgba(255,255,255,.66);
}

.ideas-ui .ideas-filters-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--ui-gap-2);
  align-items:end;
}

.ideas-ui .field-btn{
  display:flex;
  align-items:end;
}

@media (min-width:721px){
  .ideas-ui .ideas-filters-row{
    grid-template-columns: 1fr 1fr auto;
  }
}

/* Ideas grid */
.ideas-ui .ideas-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--ui-gap-3);
  align-items: stretch;
}

@media (min-width:721px){
  .ideas-ui .ideas-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:901px){
  .ideas-ui .ideas-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ideas-ui .idea-card{
  display:flex;
  flex-direction: column;
  height: 100%;
  padding: var(--ui-pad-3);
  min-width:0;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, background .15s ease;
}

.ideas-ui .idea-card:hover{
  box-shadow: var(--ui-shadow);
  transform: translateY(-1px);
  border-color: rgba(167,188,221,.30);
  background: rgba(255,255,255,.80);
}

.ideas-ui .idea-top{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width:0;
}

.ideas-ui .idea-likes{
  white-space: nowrap;
  color: rgba(15,23,42,.82);
  font-weight: 900;
}

.ideas-ui .idea-name{
  margin-top: 10px;
  font-weight: 1000;
  font-size: 1.03rem;
  line-height: 1.18;
  overflow-wrap:anywhere;
  word-break: break-word;
}

.ideas-ui .idea-meta{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ui-muted);
  font-size: .9rem;
}

.ideas-ui .idea-preview{
  margin-top: 10px;
  color: var(--ui-muted);
  line-height: 1.48;
  overflow-wrap:anywhere;
  word-break: break-word;
}

/* Status badge */
.ideas-ui .idea-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(181,194,222,.24);
  background: rgba(255,255,255,.58);
  font-weight: 1000;
  font-size: .85rem;
  line-height: 1;
  white-space: nowrap;
}

.ideas-ui .status-moderation{
  border-color: rgba(100,116,139,.20);
  background: rgba(255,255,255,.60);
  color: rgba(30,41,59,.92);
}

.ideas-ui .status-voting{
  border-color: rgba(0,136,204,.20);
  background: rgba(239,246,255,.74);
  color: rgba(2,132,199,.95);
}

.ideas-ui .status-development{
  border-color: rgba(245,158,11,.20);
  background: rgba(255,251,235,.74);
  color: rgba(120,53,15,.95);
}

.ideas-ui .status-done{
  border-color: rgba(16,185,129,.20);
  background: rgba(236,253,245,.72);
  color: rgba(6,95,70,.95);
}

.ideas-ui .status-rejected{
  border-color: rgba(220,38,38,.18);
  background: rgba(254,242,242,.72);
  color: rgba(153,27,27,.95);
}

/* Show page blocks */
.ideas-ui .idea-likebox{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:flex-end;
}

@media (max-width:720px){
  .ideas-ui .idea-likebox{
    justify-content:flex-start;
  }
}

.ideas-ui .idea-body{
  margin-top: 14px;
  color: rgba(15,23,42,.86);
  line-height: 1.58;
  overflow-wrap:anywhere;
  word-break: break-word;
}

.ideas-ui .reject-reason{
  margin-top: 14px;
  border: 1px solid rgba(220,38,38,.18);
  background: rgba(254,242,242,.72);
  border-radius: 14px;
  padding: 12px 14px;
}

.ideas-ui .reject-title{
  font-weight: 1000;
  color: rgba(153,27,27,.95);
}

.ideas-ui .reject-text{
  margin-top: 8px;
  color: rgba(153,27,27,.90);
  line-height: 1.45;
  overflow-wrap:anywhere;
  word-break: break-word;
}

.ideas-ui .review-meta{
  margin-top: 12px;
  color: var(--ui-muted);
  font-size: .9rem;
}

/* Pagination wrapper */
.ideas-ui .pagination-wrap{
  margin-top: var(--ui-gap-3);
}

.ideas-ui .ideas-hidden-card{
  padding: 14px;
  margin-bottom: 14px;
}

.ideas-ui .ideas-hidden-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ideas-ui .ideas-hidden-title{
  margin: 0;
}

.ideas-ui .ideas-hidden-subtitle{
  margin-top: 4px;
}

.ideas-ui .idea-card--flat{
  box-shadow: none;
}

/* Softer hierarchy */
.ideas-ui{
  font-weight: 450;
}

.ideas-ui :where(h1,h2,h3,h4,.ideas-title,.idea-title,.idea-view-title,.card-title){
  font-weight: 720;
  letter-spacing: 0;
  color: #1d426a;
}

.ideas-ui :where(.btn,.ui-btn,button,.status,.idea-status,.vote-btn){
  font-weight: 660;
  letter-spacing: 0;
}

.ideas-ui :where(.ideas-subtitle,.muted,.idea-meta,.review-meta){
  color: rgba(37,52,75,.64);
  font-weight: 500;
}

.ideas-ui :where(.card,.form-card,.idea-view){
  border-color: rgba(181,194,222,.28);
  box-shadow:
    0 10px 24px rgba(71,85,105,.045),
    inset 0 1px 0 rgba(255,255,255,.58);
}
