/* 司法書士ポータル（judicialscrivener.iesora.com）専用のスタイル。
 *
 * **社内 CRM とは別サービス**なので、Neutral Minimal（slate 系）のデザイン
 * システムには従わない。Tailwind CDN・Font Awesome・Google Fonts のいずれにも
 * 依存せず、この1枚で完結させる — 将来この画面群を別サーバーへ移すとき、
 * 持っていくのがこのファイルと templates/scrivener/ だけで済む形にしてある。
 *
 * 見た目はクラシックなデスクトップ風。立体表現は外側 2px のハイライト／シャドウと、
 * 内側 1px の白／黒で4段の陰影を作る。
 *
 * **素材は1つも持ち込まない。** ここにあるのは色コードとボーダーの指定だけで、
 * 画像・アイコン・フォントファイルは含めない（`url()` も `@font-face` も書かない）。
 * 特定の OS を思わせる名称・ロゴ・アイコンを画面に出さないこと。
 */

:root {
    --face: #c0c0c0;          /* ウィンドウの地色 */
    --face-light: #dfdfdf;
    --shadow: #808080;
    --dark: #0a0a0a;
    --title: #000080;         /* タイトルバーの濃紺 */
    --title-2: #1084d0;
    --field: #ffffff;
    --text: #000000;
    --disabled: #808080;
    --link: #0000ee;
    --danger: #a80000;
    --ok: #006000;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--face);
    color: var(--text);
    /* 端末にあるものだけを使う（webfont を読み込まない） */
    font-family: Tahoma, Verdana, "MS Sans Serif", "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- 立体（outset / inset） ---------- */

.win-out {
    border: 2px solid;
    border-color: var(--face-light) var(--shadow) var(--shadow) var(--face-light);
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 var(--dark);
    background: var(--face);
}

.win-in {
    border: 2px solid;
    border-color: var(--shadow) var(--face-light) var(--face-light) var(--shadow);
    box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 #ffffff;
    background: var(--field);
}

/* ---------- レイアウト ---------- */

.sc-shell { display: flex; min-height: 100vh; }

.sc-side {
    width: 200px;
    flex: 0 0 200px;
    padding: 6px;
    background: var(--face);
    border-right: 2px solid var(--shadow);
    box-shadow: inset -1px 0 0 var(--dark);
}

.sc-brand {
    padding: 6px 8px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, var(--title), var(--title-2));
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: .04em;
}

.sc-nav { display: flex; flex-direction: column; gap: 3px; }

.sc-nav a {
    display: block;
    padding: 6px 8px;
    color: var(--text);
    text-decoration: none;
    border: 2px solid transparent;
}

.sc-nav a:hover {
    border-color: var(--face-light) var(--shadow) var(--shadow) var(--face-light);
}

.sc-nav a.is-active {
    border-color: var(--shadow) var(--face-light) var(--face-light) var(--shadow);
    background: #b0b0b0;
    font-weight: bold;
}

.sc-nav .sc-nav-sep {
    margin: 6px 2px;
    border: none;
    border-top: 1px solid var(--shadow);
    border-bottom: 1px solid #ffffff;
}

.sc-main { flex: 1 1 auto; min-width: 0; padding: 10px; }

/* ---------- ウィンドウ（カード） ---------- */

.sc-window { margin-bottom: 12px; }

.sc-window > .sc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 2px;
    padding: 3px 6px;
    background: linear-gradient(90deg, var(--title), var(--title-2));
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
}

.sc-window > .sc-body { padding: 12px; }

/* ---------- 文字 ---------- */

h1, h2, h3 { margin: 0 0 8px; font-size: 14px; font-weight: bold; }
p { margin: 0 0 8px; }
a { color: var(--link); }
.sc-muted { color: #404040; }
.sc-small { font-size: 12px; }
.sc-danger { color: var(--danger); }
.sc-ok { color: var(--ok); }
.sc-mono { font-family: "Courier New", monospace; }

/* ---------- ドロップ領域 ---------- */
/* ドラッグ＆ドロップで書類を追加する枠。**色とボーダーだけで作る**
   （このポータルは画像・アイコン・フォントファイルを持ち込まない）。 */
.sc-drop {
    border: 2px dashed var(--shadow);
    background: var(--face);
    padding: 10px;
    text-align: center;
    margin: 0 0 8px;
}
.sc-drop.is-over {
    border-color: var(--title);
    background: #eaeaea;
}
.sc-drop .sc-drop-hint { margin: 0 0 6px; font-size: 12px; color: #404040; }
.sc-drop .sc-drop-status { margin: 6px 0 0; font-size: 12px; color: #404040; }

/* ---------- ボタン ---------- */

.sc-btn {
    display: inline-block;
    min-width: 88px;
    padding: 5px 12px;
    background: var(--face);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid;
    border-color: var(--face-light) var(--shadow) var(--shadow) var(--face-light);
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 var(--dark);
}

.sc-btn:active:not(:disabled) {
    border-color: var(--shadow) var(--face-light) var(--face-light) var(--shadow);
    box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 #ffffff;
    padding: 6px 11px 4px 13px;   /* 押し込まれた分だけ中身をずらす */
}

.sc-btn:focus-visible { outline: 1px dotted var(--text); outline-offset: -5px; }
.sc-btn:disabled, .sc-btn[aria-disabled="true"] { color: var(--disabled); text-shadow: 1px 1px 0 #ffffff; cursor: default; }
.sc-btn-primary { font-weight: bold; }

/* ---------- フォーム ---------- */

.sc-field { margin-bottom: 12px; }
.sc-field > label { display: block; margin-bottom: 3px; }
.sc-req { color: var(--danger); }

.sc-field input[type="text"],
.sc-field input[type="password"],
.sc-field input[type="email"],
.sc-field input[type="tel"],
.sc-field select,
.sc-field textarea {
    width: 100%;
    max-width: 420px;
    padding: 4px 5px;
    background: var(--field);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    border: 2px solid;
    border-color: var(--shadow) var(--face-light) var(--face-light) var(--shadow);
    box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 #ffffff;
}

.sc-field .sc-help { margin: 3px 0 0; font-size: 12px; color: #404040; }
.sc-field .sc-error { margin: 3px 0 0; font-size: 12px; color: var(--danger); }
.sc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- 表 ---------- */

.sc-table { width: 100%; border-collapse: collapse; background: var(--field); }
.sc-table th, .sc-table td { padding: 5px 7px; text-align: left; border: 1px solid var(--shadow); font-size: 12px; }
.sc-table th { background: var(--face); font-weight: bold; }
.sc-scroll { overflow-x: auto; }

/* ---------- 通知 ---------- */

.sc-msg { margin-bottom: 10px; padding: 8px 10px; background: var(--field); }
.sc-msg-error { color: var(--danger); font-weight: bold; }
.sc-msg-warning { color: #7a4b00; }
.sc-msg-success { color: var(--ok); }

.sc-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    background: var(--face);
    border: 1px solid var(--shadow);
}

/* ---------- 画面が狭いとき ---------- */

@media (max-width: 700px) {
    .sc-shell { display: block; }
    .sc-side {
        width: auto;
        flex: none;
        border-right: none;
        border-bottom: 2px solid var(--shadow);
        box-shadow: inset 0 -1px 0 var(--dark);
    }
    .sc-nav { flex-direction: row; flex-wrap: wrap; }
    .sc-nav a { flex: 1 1 auto; text-align: center; min-width: 44%; }
    .sc-nav .sc-nav-sep { flex: 1 1 100%; margin: 2px 0; }
    .sc-main { padding: 8px; }
    .sc-btn { min-width: 0; flex: 1 1 auto; }
    .sc-field input[type="text"],
    .sc-field input[type="password"],
    .sc-field input[type="email"],
    .sc-field input[type="tel"],
    .sc-field select,
    .sc-field textarea { max-width: none; }
}

/* ---------- 認証まわり（サイドバーの無い画面） ---------- */

.sc-center { max-width: 460px; margin: 32px auto; padding: 0 10px; }