@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

:root {
  --act-primary: #1a2b52;
  --act-primary-hover: #101d3b;
  --act-primary-soft: #e9edf5;
  --act-link: #174ea6;
  --act-text: #272727;
  --act-text-secondary: #4e4e4e;
  --act-text-muted: #686868;
  --act-page: #f7f7f8;
  --act-surface: #fff;
  --act-subtle: #f1f1f3;
  --act-border: #d7d7dc;
  --act-border-subtle: #e5e5e8;
  --act-success-bg: #d8f0df;
  --act-success: #126b34;
  --act-warning-bg: #fff0cd;
  --act-warning: #835b00;
  --act-danger-bg: #fce0e3;
  --act-danger: #b42331;
  --act-info-bg: #dcecff;
  --act-info: #174ea6;
  --act-radius-sm: 4px;
  --act-radius-md: 8px;
  --act-radius-lg: 12px;
}

* { box-sizing: border-box; }

.material-symbols-outlined {
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.act-logo {
  position: relative;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}

.act-logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
}

html { color: var(--act-text); background: var(--act-page); }

body,
button,
input,
select,
textarea {
  font-family: "Noto Sans JP", "Noto Sans", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body { margin: 0; color: var(--act-text); background: var(--act-page); }

button,
a,
[role="button"] { -webkit-tap-highlight-color: transparent; }

button { cursor: pointer; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(23, 78, 166, .25);
  outline-offset: 2px;
}

.act-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--act-radius-md);
  background: var(--act-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.act-button:hover { background: var(--act-primary-hover); }
.act-button.secondary { border-color: var(--act-border); background: #fff; color: var(--act-text); }
.act-button.secondary:hover { border-color: var(--act-primary); background: var(--act-primary-soft); color: var(--act-primary); }
.act-button.ghost { background: transparent; color: var(--act-primary); }
.act-button.ghost:hover { background: var(--act-primary-soft); }
.act-button.danger { background: var(--act-danger); }
.act-button.danger:hover { background: #861c28; }
.act-button:disabled { border-color: var(--act-border-subtle); background: #eee; color: #777; cursor: not-allowed; }

.act-field { display: flex; flex-direction: column; gap: 8px; }
.act-label { color: var(--act-text); font-size: 14px; font-weight: 700; }
.act-input,
.act-select,
.act-textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--act-border);
  border-radius: var(--act-radius-sm);
  background: #fff;
  color: var(--act-text);
  font-size: 16px;
}
.act-input,
.act-select { padding: 0 14px; }
.act-textarea { min-height: 112px; padding: 12px 14px; resize: vertical; }
.act-input::placeholder,
.act-textarea::placeholder { color: #777; opacity: 1; }

.act-card {
  border: 1px solid var(--act-border-subtle);
  border-radius: var(--act-radius-md);
  background: var(--act-surface);
  
}

.act-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--act-info-bg);
  color: var(--act-info);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.act-badge.success { background: var(--act-success-bg); color: var(--act-success); }
.act-badge.warning { background: var(--act-warning-bg); color: var(--act-warning); }
.act-badge.danger { background: var(--act-danger-bg); color: var(--act-danger); }

.act-helper { color: var(--act-text-secondary); font-size: 13px; line-height: 1.65; }
.act-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Existing admin mock readability overrides */
.side a,
.sidebar a { min-height: 40px; color: rgba(255,255,255,.9) !important; font-size: 14px !important; }
.side .brand,
.sidebar .brand { font-size: 17px !important; }
.side .grp,
.sidebar .grp { color: rgba(255,255,255,.7) !important; font-size: 12px !important; }
.side .badge,
.sidebar .badge { font-size: 12px !important; }
.main { color: var(--act-text); }
.field label,
.ml,
.muted,
.fhint,
.authsub,
.authnote,
.pwsub { color: var(--act-text-secondary) !important; }
.inp,
.btn,
.bulkbtn,
.notibtn,
.ftoggle { min-height: 40px; font-size: 14px !important; }
.inp { color: var(--act-text) !important; border-color: var(--act-border) !important; }
.inp::placeholder { color: #6b7280 !important; opacity: 1; }
.ocard,
.glist,
.filter,
.jisum,
.modalbox { border-color: var(--act-border) !important; }
.metarow,
.ostat,
.ptable,
.mltable { font-size: 14px !important; }
.ptable th,
.mltable th { color: #4d5561 !important; font-size: 13px !important; }
.ptable td,
.mltable td { color: var(--act-text); }
.btn.primary,
.bulkbtn.go { background: var(--act-primary) !important; border-color: var(--act-primary) !important; }
.btn.primary:hover,
.bulkbtn.go:hover { background: var(--act-primary-hover) !important; }

/* Keep compact operational metadata readable without changing the dense layout. */
.metarow .ml,
.meetbar .ml,
.meetbar .mnote,
.nmcell .stt,
.nmcell .notione,
.glh .hint,
.gt,
.qual,
.selnote,
.jtable .wd,
.qtag,
.vcnt,
.pwsub,
.authlbl,
.authnote,
.authlink a,
.fhint,
.udel { font-size: 12px !important; }

.field label,
.glf .inp,
.jtable .inp.sm,
.pwbtn,
.addv,
.vsel,
.dropzone,
.fcount,
.fclear,
.btn.sm,
.bulkhint,
.opill,
.activetag,
.posbadge { font-size: 13px !important; }

@media (max-width: 720px) {
  .act-button.primary-mobile { width: 100%; }
}