/* Admin Blog — Manage / Create / Edit
   Webflow-style staging layout with dark side panels. */

.admin-shell {
   max-width: 1240px;
   margin: 0 auto;
   padding: 7rem 1.5rem 5rem;
   color: #fff;
}

.admin-title-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   margin-bottom: 2rem;
}

.admin-title-row h1 {
   font-size: 2rem;
   font-weight: 700;
}

.admin-title-row .actions {
   display: flex;
   gap: 0.75rem;
   align-items: center;
}

.admin-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 10px 18px;
   border-radius: 8px;
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.04);
   color: #fff;
   text-decoration: none;
   transition: all 0.2s ease;
}

.admin-btn:hover {
   border-color: rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.08);
}

.admin-btn.primary {
   background: #6366f1;
   border-color: #6366f1;
}

.admin-btn.primary:hover {
   background: #4f46e5;
   border-color: #4f46e5;
}

.admin-btn.danger {
   color: #f87171;
   border-color: rgba(248, 113, 113, 0.35);
   background: rgba(248, 113, 113, 0.08);
}

.admin-btn.ghost {
   background: transparent;
}

.admin-btn[disabled],
.admin-btn.disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

/* ----- Form layout ----- */
.admin-form-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 340px;
   gap: 1.5rem;
   align-items: start;
}

@media (max-width: 980px) {
   .admin-form-grid {
      grid-template-columns: 1fr;
   }
}

.admin-panel {
   background: rgba(255, 255, 255, 0.025);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   padding: 1.75rem;
}

.admin-panel + .admin-panel {
   margin-top: 1.5rem;
}

.admin-panel h2 {
   font-size: 1.05rem;
   font-weight: 600;
   margin-bottom: 1rem;
   color: #fff;
   letter-spacing: 0.01em;
}

.admin-panel .muted {
   color: rgba(255, 255, 255, 0.55);
   font-size: 0.85rem;
   margin-bottom: 1rem;
}

.field {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-bottom: 1.1rem;
}

.field > label {
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: rgba(255, 255, 255, 0.7);
   font-weight: 600;
}

.field .hint {
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.45);
}

.field .err {
   font-size: 0.78rem;
   color: #f87171;
}

.field input[type="text"],
.field input[type="url"],
.field textarea,
.field select {
   width: 100%;
   background: rgba(0, 0, 0, 0.35);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: #fff;
   padding: 12px 14px;
   border-radius: 8px;
   outline: none;
   font-size: 0.95rem;
   font-family: inherit;
   transition: border-color 0.2s ease, background 0.2s ease;
}

.field textarea {
   min-height: 90px;
   resize: vertical;
}

.field select {
   appearance: none;
   background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
   background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
   background-size: 5px 5px;
   background-repeat: no-repeat;
   padding-right: 36px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
   border-color: #6366f1;
   background: rgba(0, 0, 0, 0.5);
}

.field .counter {
   font-size: 0.72rem;
   color: rgba(255, 255, 255, 0.4);
   text-align: right;
}

/* Toggle */
.toggle {
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
}

.toggle input {
   appearance: none;
   width: 40px;
   height: 22px;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 999px;
   position: relative;
   transition: background 0.2s ease;
   cursor: pointer;
}

.toggle input::after {
   content: "";
   position: absolute;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: #fff;
   top: 2px;
   left: 2px;
   transition: transform 0.2s ease;
}

.toggle input:checked {
   background: #6366f1;
}

.toggle input:checked::after {
   transform: translateX(18px);
}

.toggle span {
   color: #fff;
   font-size: 0.9rem;
}

/* Status segmented control */
.status-control {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px;
   background: rgba(0, 0, 0, 0.35);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 8px;
   padding: 4px;
}

.status-control label {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 10px;
   border-radius: 6px;
   cursor: pointer;
   color: rgba(255, 255, 255, 0.7);
   font-size: 0.85rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.status-control input {
   display: none;
}

.status-control input:checked + span {
   background: #6366f1;
   color: #fff;
}

.status-control label span {
   display: flex;
   width: 100%;
   height: 100%;
   align-items: center;
   justify-content: center;
   border-radius: 6px;
   padding: 10px;
}

/* Image uploaders */
.image-uploader {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.image-drop {
   border: 1px dashed rgba(255, 255, 255, 0.2);
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.25);
   padding: 1.25rem;
   text-align: center;
   cursor: pointer;
   transition: border-color 0.2s ease, background 0.2s ease;
}

.image-drop:hover {
   border-color: #6366f1;
   background: rgba(99, 102, 241, 0.06);
}

.image-drop p {
   color: rgba(255, 255, 255, 0.55);
   font-size: 0.85rem;
}

.image-preview {
   position: relative;
   width: 100%;
   border-radius: 10px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.08);
}

.image-preview img {
   width: 100%;
   height: auto;
   display: block;
}

.image-preview .remove {
   position: absolute;
   top: 8px;
   right: 8px;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.75);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #f87171;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
}

/* ----- Rich text editor ----- */
.rte-shell {
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 10px;
   background: rgba(0, 0, 0, 0.35);
   overflow: hidden;
}

.rte-toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
   align-items: center;
   padding: 8px;
   background: rgba(255, 255, 255, 0.04);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rte-btn {
   background: transparent;
   border: 1px solid transparent;
   color: rgba(255, 255, 255, 0.75);
   font-size: 0.85rem;
   padding: 6px 10px;
   min-width: 32px;
   border-radius: 6px;
   cursor: pointer;
   font-weight: 600;
   font-family: inherit;
}

.rte-btn:hover {
   background: rgba(255, 255, 255, 0.08);
   color: #fff;
}

.rte-btn.is-active {
   background: #6366f1;
   color: #fff;
}

.rte-divider {
   width: 1px;
   height: 20px;
   background: rgba(255, 255, 255, 0.15);
   margin: 0 4px;
}

.rte-loading {
   padding: 1.5rem;
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.9rem;
}

.rte-content {
   min-height: 320px;
   padding: 1.25rem;
   color: rgba(255, 255, 255, 0.92);
   font-size: 1rem;
   line-height: 1.75;
   outline: none;
}

.rte-content p {
   margin: 0 0 1em;
}

.rte-content h1 {
   font-size: 1.75rem;
   font-weight: 700;
   margin: 1.25em 0 0.5em;
   color: #fff;
}

.rte-content h2 {
   font-size: 1.4rem;
   font-weight: 700;
   margin: 1.25em 0 0.5em;
   color: #fff;
}

.rte-content h3 {
   font-size: 1.15rem;
   font-weight: 700;
   margin: 1.25em 0 0.5em;
   color: #fff;
}

.rte-content ul,
.rte-content ol {
   padding-left: 1.5rem;
   margin: 0 0 1em;
}

.rte-content blockquote {
   border-left: 3px solid #6366f1;
   padding-left: 1rem;
   margin: 1em 0;
   color: rgba(255, 255, 255, 0.75);
   font-style: italic;
}

.rte-content pre {
   background: rgba(0, 0, 0, 0.5);
   padding: 1rem;
   border-radius: 8px;
   overflow-x: auto;
   font-family: "Space Mono", monospace;
   font-size: 0.85rem;
   color: #a5b4fc;
}

.rte-content code {
   background: rgba(255, 255, 255, 0.08);
   padding: 2px 5px;
   border-radius: 4px;
   font-size: 0.85em;
   font-family: "Space Mono", monospace;
}

.rte-content a {
   color: #a5b4fc;
   text-decoration: underline;
}

.rte-content img,
.rte-content .editor-inline-image {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   margin: 1rem 0;
}

.rte-content p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   color: rgba(255, 255, 255, 0.35);
   float: left;
   height: 0;
   pointer-events: none;
}

/* ----- Admin blog list ----- */
.admin-blog-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.admin-blog-row {
   display: flex;
   gap: 16px;
   padding: 14px;
   background: rgba(0, 0, 0, 0.35);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: 10px;
   align-items: center;
}

.admin-blog-row img.thumb {
   width: 64px;
   height: 64px;
   object-fit: cover;
   border-radius: 8px;
   flex-shrink: 0;
   background: rgba(255, 255, 255, 0.04);
}

.admin-blog-row .body {
   flex: 1;
   min-width: 0;
}

.admin-blog-row .body h3 {
   color: #fff;
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.admin-blog-row .meta {
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.55);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   display: flex;
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
}

.status-pill {
   font-size: 0.7rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   padding: 3px 8px;
   border-radius: 999px;
   font-weight: 600;
}

.status-pill.published {
   background: rgba(34, 197, 94, 0.15);
   color: #4ade80;
   border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-pill.draft {
   background: rgba(234, 179, 8, 0.1);
   color: #fde047;
   border: 1px solid rgba(234, 179, 8, 0.3);
}

.admin-blog-row .row-actions {
   display: flex;
   gap: 8px;
   flex-shrink: 0;
}

/* ----- react-datepicker (dark theme override) ----- */
.datepicker-wrap {
   width: 100%;
}

.datepicker-input {
   width: 100%;
   background: rgba(0, 0, 0, 0.35);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: #fff;
   padding: 12px 14px;
   border-radius: 8px;
   outline: none;
   font-size: 0.95rem;
   font-family: inherit;
}

.datepicker-input:focus {
   border-color: #6366f1;
   background: rgba(0, 0, 0, 0.5);
}

.react-datepicker-popper {
   z-index: 50;
}

.react-datepicker {
   background: #0b0f19 !important;
   border: 1px solid rgba(255, 255, 255, 0.15) !important;
   color: #fff !important;
   font-family: inherit !important;
}

.react-datepicker__header {
   background: #111827 !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header,
.react-datepicker__day-name {
   color: #fff !important;
}

.react-datepicker__day,
.react-datepicker__time-name {
   color: rgba(255, 255, 255, 0.85) !important;
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
   background: rgba(99, 102, 241, 0.2) !important;
   color: #fff !important;
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected,
.react-datepicker__time-list-item--selected {
   background: #6366f1 !important;
   color: #fff !important;
}

.react-datepicker__day--outside-month {
   color: rgba(255, 255, 255, 0.3) !important;
}

.react-datepicker__triangle {
   fill: #111827 !important;
   color: #111827 !important;
   stroke: rgba(255, 255, 255, 0.15) !important;
}

.react-datepicker__time-container {
   border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.react-datepicker__time-container .react-datepicker__time {
   background: #0b0f19 !important;
}

.react-datepicker__time-list-item {
   color: rgba(255, 255, 255, 0.8) !important;
}

.react-datepicker__time-list-item:hover {
   background: rgba(99, 102, 241, 0.2) !important;
   color: #fff !important;
}

.react-datepicker__navigation-icon::before {
   border-color: rgba(255, 255, 255, 0.7) !important;
}