/* admin-2010.css
   A small CSS library for a 2010s "enterprise admin" aesthetic.
   No JS required. Works fine with plain HTML.
*/

:root{
  --a-bg-top: #f6f8fb;
  --a-bg-bot: #d7dfe8;

  --a-panel: #ffffff;
  --a-border: #aeb9c4;
  --a-border-soft: #d8e0e8;

  --a-text: #2b2b2b;
  --a-muted: #5a6775;

  --a-header-top: #4a5f76;
  --a-header-bot: #2f3f52;

  --a-subhead-bg: #f2f5f8;

  --a-primary-top: #3b91d6;
  --a-primary-bot: #22679b;
  --a-primary-border: #1f5a8a;

  --a-danger-bg: #fff2f2;
  --a-danger-border: #d6a6a6;
  --a-danger-text: #8b2c2c;

  --a-success-bg: #f2fff2;
  --a-success-border: #a9d6a6;
  --a-success-text: #2c8b2c;

  --a-warn-bg: #fff8e6;
  --a-warn-border: #e2c37a;
  --a-warn-text: #7a5a12;

  --a-shadow: 0 8px 24px rgba(0,0,0,.15);
  --a-inset: inset 0 1px 2px rgba(0,0,0,.08);
  --a-focus: 0 0 0 3px rgba(109,159,211,.25);

  --a-radius: 6px;
  --a-radius-sm: 4px;

  --a-font: Arial, Helvetica, sans-serif;
}

/* -------- Base / reset-ish -------- */
html, body { height: fit-content }
body{
  margin:0;
  font-family: var(--a-font);
  color: var(--a-text);
  background: linear-gradient(var(--a-bg-top), var(--a-bg-bot));
}

*, *::before, *::after { box-sizing: border-box; }

a{
  color:#4e79a7;
  text-decoration:none;
}
a:hover{ text-decoration: underline; }

hr{
  border:0;
  border-top:1px solid var(--a-border-soft);
  margin:16px 0;
}

/* -------- Layout helpers -------- */
.a-fullpage {
  height: 100vh;
  width: 100vw;

}
.a-page{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.a-container{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.a-row{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.a-row--wrap{ flex-wrap: wrap; }

.a-col{ flex: 1 1 0; }
.a-col--auto{ flex: 0 0 auto; }

/* -------- Panels / cards -------- */
.a-shell{
  width: 380px;
  border:1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: var(--a-panel);
  box-shadow: var(--a-shadow);
  overflow:hidden;
}

.a-card{
  margin: 0 0 16px 0;
  border:1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: var(--a-panel);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  overflow:hidden;
  width: 100%;
}

.a-card__head{
  padding:12px 14px;
  border-bottom:1px solid var(--a-border-soft);
  background: var(--a-subhead-bg);
  color: var(--a-muted);
  font-size: 12px;
  font-weight: 700;
}

.a-card__body{ padding:14px; }

.a-headerbar{
  padding:14px 16px;
  background: linear-gradient(var(--a-header-top), var(--a-header-bot));
  color:#fff;
  border-bottom:1px solid #233040;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  font-weight:700;
  letter-spacing:.2px;
}

.a-subheaderbar{
  padding:10px 16px;
  background: var(--a-subhead-bg);
  border-bottom:1px solid var(--a-border-soft);
  color: var(--a-muted);
  font-size:12px;
}

.a-footerbar{
  padding:10px 16px;
  border-top:1px solid var(--a-border-soft);
  background:#fafbfd;
  font-size:11px;
  color:#7a8794;
  display:flex;
  justify-content:space-between;
  gap:12px;
}

/* -------- Typography -------- */
.a-h1{ font-size:20px; margin:0 0 10px; }
.a-h2{ font-size:16px; margin:0 0 10px; }
.a-muted{ color: var(--a-muted); }
.a-small{ font-size: 12px; color: var(--a-muted); }

/* -------- Forms -------- */
.a-form{ margin: 0; }
.a-field{ margin-bottom: 12px; }

.a-label{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color: var(--a-muted);
  font-weight:700;
}

.a-input, .a-select, .a-textarea{
  width:100%;
  padding:10px;
  border:1px solid #b6c2ce;
  border-radius: var(--a-radius-sm);
  background:#fbfcfd;
  box-shadow: var(--a-inset);
  outline:none;
  font-size:14px;
  color: var(--a-text);
}

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

.a-input:focus, .a-select:focus, .a-textarea:focus{
  border-color:#6d9fd3;
  box-shadow: var(--a-focus), var(--a-inset);
  background:#fff;
}

.a-help{
  margin-top:6px;
  font-size: 11px;
  color:#7a8794;
}

.a-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin-top:14px;
}

.a-actions--between{ justify-content: space-between; }

/* Checkbox / inline controls */
.a-inline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: var(--a-muted);
  user-select:none;
}

.a-inline input{ vertical-align: middle; }

/* -------- Buttons -------- */
.a-btn{
  cursor:pointer;
  border:1px solid var(--a-primary-border);
  border-radius: var(--a-radius-sm);
  padding:9px 14px;
  background: linear-gradient(var(--a-primary-top), var(--a-primary-bot));
  color:#fff;
  font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  font-size:13px;
  line-height:1;
}

.a-btn:active{
  background: linear-gradient(var(--a-primary-bot), var(--a-primary-top));
}

.a-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.a-btn--secondary{
  border:1px solid #7b8a98;
  background: linear-gradient(#f4f6f8, #dfe6ee);
  color:#334252;
  text-shadow:none;
}

.a-btn--danger{
  border:1px solid #a85a5a;
  background: linear-gradient(#e78c8c, #b75b5b);
}

.a-btn--small{
  padding:7px 10px;
  font-size:12px;
}

/* -------- Alerts (server-rendered messages) -------- */
.a-alert{
  margin: 0;
  padding:10px;
  border-radius: var(--a-radius-sm);
  font-size:12px;
  border:1px solid transparent;
}

.a-alert:empty{ display:none; }

.a-alert--danger{
  border-color: var(--a-danger-border);
  background: var(--a-danger-bg);
  color: var(--a-danger-text);
}

.a-alert--success{
  border-color: var(--a-success-border);
  background: var(--a-success-bg);
  color: var(--a-success-text);
}

.a-alert--warn{
  border-color: var(--a-warn-border);
  background: var(--a-warn-bg);
  color: var(--a-warn-text);
}

/* -------- Tables -------- */
.a-table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  border:1px solid var(--a-border);
  border-radius: var(--a-radius);
  overflow:hidden;
  background:#fff;
}

.a-table th, .a-table td{
  padding:10px 10px;
  border-bottom:1px solid var(--a-border-soft);
  font-size:13px;
  text-align:left;
  vertical-align: top;
}

.a-table th{
  background: linear-gradient(#f6f8fb, #e7edf5);
  color:#4a5968;
  font-weight:700;
  border-bottom:1px solid #cfd8e3;
}

.a-table tr:last-child td{ border-bottom:0; }

.a-table--striped tbody tr:nth-child(even) td{
  background:#fafbfd;
}

/* -------- Nav bar (simple) -------- */
.a-topnav{
  border-bottom:1px solid #233040;
  background: linear-gradient(var(--a-header-top), var(--a-header-bot));
  color:#fff;
  padding:10px 14px;
}

.a-topnav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.a-topnav__brand{
  font-weight:700;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  letter-spacing:.2px;
}

.a-topnav__links{
  display:flex;
  gap:12px;
  font-size:12px;
}
.a-topnav__links a{
  color:#dbe6f1;
  text-decoration:none;
}
.a-topnav__links a:hover{ text-decoration: underline; }

/* -------- Utility spacing -------- */
.a-m0{ margin:0; }
.a-mt8{ margin-top:8px; }
.a-mt12{ margin-top:12px; }
.a-mt16{ margin-top:16px; }
.a-mb8{ margin-bottom:8px; }
.a-mb12{ margin-bottom:12px; }
.a-mb16{ margin-bottom:16px; }
.a-p0{ padding:0; }
.a-p12{ padding:12px; }
.a-p16{ padding:16px; }

/* -------- Optional: login sizing helper -------- */
.a-shell--login{ width: 380px; }

/* ===========================
   Admin-2010 Expansion Pack
   =========================== */

/* --- App Layout (header + sidebar + content + footer) --- */
.a-app{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.a-app__body{
  flex: 1 1 auto;
  display: flex;
  min-height: 0; /* allows scroll regions */
}

.a-sidenav{
  width: 240px;
  background: linear-gradient(#f6f8fb, #e7edf5);
  border-right: 1px solid var(--a-border-soft);
}

.a-sidenav__head{
  padding: 12px 14px;
  border-bottom: 1px solid var(--a-border-soft);
  color: var(--a-muted);
  font-size: 12px;
  font-weight: 700;
}

.a-sidenav__nav{ padding: 8px; }

.a-sidenav a{
  display: block;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: var(--a-radius-sm);
  color: #334252;
  text-decoration: none;
  font-size: 13px;
}

.a-sidenav a:hover{
  background: #fbfcfd;
  border-color: #d6dee8;
}

.a-sidenav a.is-active{
  background: linear-gradient(#ffffff, #eef4fb);
  border-color: #b8c8da;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  font-weight: 700;
}

.a-content{
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px;
}

.a-content__header{
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.a-content__title{ margin: 0; }
.a-content__tools{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }

/* Footer */
.a-sitefooter{
  border-top: 1px solid var(--a-border-soft);
  background: #fafbfd;
  color: #7a8794;
  font-size: 11px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* --- Form controls (select, textarea already exist, add radio + switch styling) --- */
.a-select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7b8a 50%),
    linear-gradient(135deg, #6b7b8a 50%, transparent 50%),
    linear-gradient(#fbfcfd, #fbfcfd);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.a-radio, .a-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--a-muted);
  user-select: none;
}

.a-radio input, .a-check input{
  width: 14px;
  height: 14px;
  margin: 0;
}

/* Switch (checkbox alternative) */
.a-switch{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--a-muted);
  user-select: none;
}

.a-switch input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.a-switch__track{
  width: 40px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid #b6c2ce;
  background: linear-gradient(#f4f6f8, #dfe6ee);
  box-shadow: var(--a-inset);
  position: relative;
}

.a-switch__thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #9aa8b6;
  background: linear-gradient(#ffffff, #e9eef3);
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform 140ms ease;
}

.a-switch input:focus + .a-switch__track{
  box-shadow: var(--a-focus), var(--a-inset);
  border-color: #6d9fd3;
}

.a-switch input:checked + .a-switch__track{
  border-color: #1f5a8a;
  background: linear-gradient(#3b91d6, #22679b);
}

.a-switch input:checked + .a-switch__track .a-switch__thumb{
  transform: translateX(20px);
  border-color: #1f5a8a;
}

/* --- Tabs --- */
.a-tabs{
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: #fff;
  overflow: hidden;
}

.a-tabs__bar{
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--a-border-soft);
  background: linear-gradient(#f6f8fb, #e7edf5);
}

.a-tab{
  padding: 10px 12px;
  border-right: 1px solid var(--a-border-soft);
  font-size: 12px;
  color: #4a5968;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.a-tab:hover{ background: #fbfcfd; }

.a-tab.is-active{
  background: #fff;
  font-weight: 700;
  color: #334252;
}

.a-tabs__panel{ padding: 14px; }

/* --- Loading: Progress bar --- */
.a-progress{
  height: 14px;
  border: 1px solid #b6c2ce;
  border-radius: 999px;
  background: linear-gradient(#f4f6f8, #dfe6ee);
  box-shadow: var(--a-inset);
  overflow: hidden;
}

.a-progress__bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(#3b91d6, #22679b);
  border-right: 1px solid #1f5a8a;
}

.a-progress--striped .a-progress__bar{
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%,
      transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%,
      transparent 75%, transparent),
    linear-gradient(#3b91d6, #22679b);
  background-size: 18px 18px, 100% 100%;
}

/* Indeterminate (no percent) */
.a-progress--indeterminate .a-progress__bar{
  width: 35%;
  animation: a-progress-move 1.1s linear infinite;
}

@keyframes a-progress-move{
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* --- Loading: Spinner --- */
.a-spinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid #c7d2df;
  border-top-color: #2f7dbb;
  animation: a-spin 800ms linear infinite;
}

.a-spinner--sm{ width: 16px; height: 16px; border-width: 3px; }
.a-spinner--lg{ width: 34px; height: 34px; border-width: 4px; }

@keyframes a-spin{
  to { transform: rotate(360deg); }
}

/* --- Toasts (Toastify-compatible styling) --- */
/* Toastify uses .Toastify__toast-container and .Toastify__toast */
.Toastify__toast-container{
  font-family: var(--a-font);
}

.Toastify__toast{
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  box-shadow: var(--a-shadow);
  background: #fff;
  color: var(--a-text);
  font-size: 12px;
}

.Toastify__toast-body{
  padding: 10px 12px;
}

.Toastify__close-button{
  color: #4a5968;
  opacity: .8;
}
.Toastify__close-button:hover{ opacity: 1; }

/* Variant helpers (optional) */
.a-toast--success{ border-color: var(--a-success-border); }
.a-toast--warn{ border-color: var(--a-warn-border); }
.a-toast--danger{ border-color: var(--a-danger-border); }

/* --- Badges --- */
.a-badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #cfd8e3;
  background: linear-gradient(#ffffff, #eef4fb);
  font-size: 11px;
  color: #4a5968;
  font-weight: 700;
}
.a-badge--success{ border-color: var(--a-success-border); }
.a-badge--warn{ border-color: var(--a-warn-border); }
.a-badge--danger{ border-color: var(--a-danger-border); }

/* --- Breadcrumbs --- */
.a-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: var(--a-muted);
}
.a-breadcrumb a{ color:#4e79a7; }
.a-breadcrumb__sep{ color:#9aa8b6; }

/* --- Pagination --- */
.a-pagination{
  display:flex;
  gap:6px;
  align-items:center;
}
.a-pagebtn{
  padding:7px 10px;
  border:1px solid #b6c2ce;
  border-radius: var(--a-radius-sm);
  background: linear-gradient(#f4f6f8, #dfe6ee);
  color:#334252;
  font-size:12px;
  text-decoration:none;
}
.a-pagebtn:hover{ background: linear-gradient(#ffffff, #eef4fb); }
.a-pagebtn.is-active{
  border-color: var(--a-primary-border);
  background: linear-gradient(var(--a-primary-top), var(--a-primary-bot));
  color:#fff;
  font-weight:700;
}

/* --- Modal (CSS-only structure; show/hide controlled by server or JS) --- */
.a-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 20px;
  z-index: 999;
}
.a-modal-backdrop.is-open{ display:flex; }

.a-modal{
  width: 520px;
  max-width: 100%;
  border: 1px solid var(--a-border);
  border-radius: var(--a-radius);
  background: #fff;
  box-shadow: var(--a-shadow);
  overflow:hidden;
}
.a-modal__head{
  padding: 12px 14px;
  background: linear-gradient(#f6f8fb, #e7edf5);
  border-bottom: 1px solid var(--a-border-soft);
  font-weight:700;
  color:#334252;
}
.a-modal__body{ padding: 14px; }
.a-modal__foot{
  padding: 12px 14px;
  border-top: 1px solid var(--a-border-soft);
  background: #fafbfd;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}