@import url(pico.min.css);
*{box-sizing:border-box;}
html,body{min-height:100%;}
html{font-family:system-ui;}
.flx_v,[flx_v]{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-direction:column;}
.flx_h,[flx_h]{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;}
.fgrow,[fgrow],main{flex-grow:1;}.fshrink,[fshrink]{flex-shrink:1;}
main { min-height: CALC(100vh - 225px); }
.hauto,[hauto]{height:auto;} .wauto,[wauto]{width:auto;}
.h100,[h100]{height:100%;} .w100,[w100]{width:100%;}
footer,header{width:100%;font-size:0.8em;}
body{padding:0 1rem;}
ib,.ib,[ib]{display:inline-block;line-height:1.2;}
pre{padding:10px;}
.pr{
  text-align: start; padding: 5px; box-shadow: 0 1px 3px; color: #aaa; font-family: monospace; font-size: 13px; width: 3rem; height: 1.7em; overflow: hidden; margin: 10px;
  &:hover{height: auto;width: auto;}
}
.debug {
    position: fixed; bottom: -0.5em; height: 1em; margin: 0; right: 0; left: auto; overflow: hidden;border-radius: 10px 10px 0 0;padding-top:2em;width: 105px;
    &:hover{height: auto;overflow: auto;height: 70vh;width: auto; left: 0;}
    &::before { content: '⚠️ DEBUG'; position: fixed; background: #ff02; width: 100%; padding: 0.5em; margin: -2em -0.5em -0.5em; line-height: 1em;border-radius: 10px 10px 0 0; }
}
logo{background-image:var(--logo);background-size:90%;background-position:center;aspect-ratio:2 / 1;height:2.5em;display:inline-block;vertical-align:sub;}
@media (prefers-color-scheme:dark),[data-theme=dark],.dark_theme{
  logo{filter:invert(1) hue-rotate(180deg);}
}
info{color:#4ab0e7;background:#aad8ff33;padding:7px 13px 10px;line-height:1.2;vertical-align:middle;border-radius:15px;display:inline-flex;align-items:center;gap:8px;}
info::before{content:'ℹ️';}
alert{
  color:#e7a84a;background:#ffa3;padding:7px 13px 10px;line-height:1.2;vertical-align:middle;border-radius:15px;display:inline-flex;align-items:center;gap:8px;
  &::before{content:'⚠️';}
}
/* keyframes */
@keyframes fadeSlideIn{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Error Message */
.error-message,error{
  background-color: var(--form-element-invalid-border-color); border: 1px solid var(--form-element-invalid-active-border-color); color: var(--primary-inverse);
  padding:7px 13px 10px;line-height:1.2;vertical-align:middle;border-radius:15px;display:inline-flex;align-items:center;gap:8px;
  &::before{content:'❗';}
}
table.tbl{
  width:100%;border-collapse:collapse;background-color:var(--blockquote-border-color);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);overflow:hidden;
  thead{background-color:#2c3e50;color:white;}
  th,td{padding:16px 20px;border-color:var(--table-border-color);}
  th{font-weight:600;letter-spacing:0.5px;}
  tbody{
    tr{
      border-bottom:1px solid var(--table-border-color);transition:background-color 0.3s ease;
      &:hover{background-color:#f0f8ff;}
      &:last-child{border-bottom:none;}
    }
  }
  /* Responsive column hiding */
  @media (max-width:600px){
    th.hide-mobile,td.hide-mobile{display:none;}
    th,td{padding:12px 14px;font-size:14px;}
  }
}

.content-view,card,.card,[card] {
    animation: .6s ease-out forwards fadeSlideIn;
    display:block;
    max-width: 1200px; margin: 2rem auto; padding: 2rem; background: var(--card-background-color); box-shadow: var(--box-shadow); border-radius: 8px;
    .field-name, .field-content, .field-tags { margin-bottom: 1rem; padding-bottom: 1rem; }
    h2 { color: var(--h2-color); font-size: 1.25rem; margin-bottom: 1rem; }
    .field-content { line-height: 1.6; color: var(--color); }
    .field-empty { color: var(--muted-color); font-style: italic; padding: 1rem; background: var(--form-element-background-color); border-radius: 4px; }
}

.form-group {
  margin-bottom: 1.5rem;
  label { display: block; margin-bottom: 0.5rem; color: var(--h3-color); font-weight: 500; }
}
.form-control {
    width: 100%; padding: 0.75rem; border: 1px solid var(--form-element-border-color); border-radius: 4px; background: var(--form-element-background-color); color: var(--form-element-color); transition: all 0.2s ease;
    &:focus { outline: none; border-color: var(--form-element-active-border-color); box-shadow: 0 0 0 3px var(--primary-focus); }
    &:disabled { opacity: var(--form-element-disabled-opacity); cursor: not-allowed; }
}
.options-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; padding: 0.5rem 0; }
.option-item{
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease;
  &:hover { background: var(--form-element-background-color); }
  input[type="checkbox"] { width: 1.2rem; height: 1.2rem; margin: 0; }
}
.option-label { color: var(--color); }
.hint,[hint] { margin-top: 0.5rem; font-size: 0.875rem; }
.hint-required { color: var(--form-element-invalid-border-color); }
.hint-pattern { color: var(--muted-color); }
.form-actions { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--muted-border-color); }
button[ico="save"]::before { content: "💾"; margin-inline-end: 0.5rem; }
/* Action Bar Styles */
.actions-bar {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--muted-border-color);
    [dir="rtl"] & {
        flex-direction: row-reverse;
    }
    >*{margin:0;}
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    box-shadow: var(--button-box-shadow);
    background: var(--background-color3);

    &:hover {
        box-shadow: var(--button-hover-box-shadow);
    }

    &.primary {
        background-color: var(--primary-background);
        color: var(--primary-inverse);

        &:hover {
            background-color: var(--primary-hover-background);
        }
    }

    &.secondary {
        background-color: var(--secondary-background);
        color: var(--secondary-inverse);

        &:hover {
            background-color: var(--secondary-hover-background);
        }
    }

    &.danger {
        background-color: var(--form-element-invalid-border-color);
        color: var(--primary-inverse);

        &:hover {
            background-color: var(--form-element-invalid-active-border-color);
        }
    }
}

/* Status Button Styles */
.status {
    &.published,
    &.hidden {
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.875rem;
        color: var(--primary-inverse);
    }

    &.published {
        background-color: var(--form-element-valid-border-color);
    }

    &.hidden {
        background-color: var(--secondary-background);
    }
}
/* M */
@media (max-width: 768px) {
    .content-view { margin: 1rem; padding: 1rem; }
    .actions-bar,[abar] { flex-direction: column; gap: 0.5rem; }
    .btn,[btn] { width: 100%; justify-content: center; }
    .content-form { padding: 0 1rem; }
    .options-group { grid-template-columns: 1fr; }
}