/* ============================================================
   GYG_WEB 공용 디자인 토큰
   - 모든 모듈(근태/지출결의/자재관리/보수관리 등) 화면은
     색상을 직접 쓰지 말고 이 변수(var(--...))만 쓴다.
   - 나중에 톤을 바꾸고 싶으면 이 파일 하나만 고치면 전체에 반영됨.
   ============================================================ */
:root {
    --bg-page: #0D1117;
    --bg-panel: #161B22;
    --bg-input: #0D1117;
    --border: #30363D;

    --accent: #1A7FC1;
    --accent-hover: #2591D8;

    --text-main: #E6EDF3;
    --text-sub: #A9B4BE;
    --text-faint: #8A96A1;

    --success: #3FB950;
    --warning: #D29922;
    --danger: #F85149;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --font-base: "Pretendard", "Malgun Gothic", sans-serif;
}

body {
    background: var(--bg-page);
    color: var(--text-main);
    font-family: var(--font-base);
    margin: 0;
}

/* Bootstrap 기본 스타일(body{color:#212529} 등)이 테이블 셀 같은 곳에서
   우리 색상 지정을 이겨버리는 문제 방지용 전역 방어 규칙.
   앞으로 새 모듈 화면에서도 이 문제가 재발하지 않도록 여기서 한 번에 막는다. */
h1, h2, h3, h4, h5, h6, p, span, div, label, td, th, li, a {
    color: inherit;
}

/* ---- 공용 컴포넌트 클래스 : 새 모듈 화면에서 그대로 재사용 ---- */

.gyg-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.12);
}

.gyg-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
/* 표/그리드처럼 데이터가 많은 화면용 - 창 크기에 맞춰 유동적으로 늘고 줄어듦 (최대 1600px) */
.gyg-page-wide {
    max-width: min(1400px, 96vw);
}
.gyg-page-header h1 {
    font-size: 22px;
    margin: 0 0 4px;
}

.gyg-page-header .subtitle {
    color: var(--text-sub);
    font-size: 14px;
    margin: 0 0 20px;
}

.gyg-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gyg-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(26,127,193,0.15);
}

/* 다크 배경에서 브라우저 기본 달력/시계 아이콘이 검게 나와 안 보이는 문제 보정 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}

.gyg-btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.gyg-btn-primary:active { transform: scale(0.98); }

.gyg-btn-primary:hover {
    background: var(--accent-hover);
}

.gyg-btn-secondary {
    background: #21262D;
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
}

.gyg-alert {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin: 10px 0;
}

.gyg-alert-success { background: rgba(63,185,80,0.12); color: var(--success); border: 1px solid rgba(63,185,80,0.3); }
.gyg-alert-error   { background: rgba(248,81,73,0.12); color: var(--danger); border: 1px solid rgba(248,81,73,0.3); }

/* 결재 상태 뱃지 - 근태/지출결의/자재관리 등 결재가 들어가는 모든 모듈에서 공용 사용 */
.gyg-status-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    display: inline-block;
}

.gyg-status-draft     { background: rgba(26,127,193,0.15); color: var(--accent-hover); } /* 작성중 */
.gyg-status-submitted { background: rgba(210,153,34,0.15); color: var(--warning); }   /* 결재대기 */
.gyg-status-approved  { background: rgba(63,185,80,0.15);  color: var(--success); }   /* 승인완료 */
.gyg-status-rejected  { background: rgba(248,81,73,0.15);  color: var(--danger); }    /* 반려 */
.gyg-status-cancelled { background: rgba(139,148,158,0.15);color: var(--text-sub); } /* 취소됨 */

.gyg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.gyg-table th {
    text-align: left;
    color: var(--text-sub);
    font-weight: 500;
    padding: 8px;
    border-bottom: 1px solid var(--border);
}

.gyg-table td {
    padding: 8px;
    border-bottom: 1px solid #21262D;
}

/* ============================================================
   누를 수 있는 것 / 누를 수 없는 것 구분 규칙 (전 화면 공통)
   - 누를 수 있음 : 실선 테두리 + 파란 아이콘 + 화살표, 마우스를 올리면 파란 테두리·옅은 파란 배경
   - 준비중/사용 불가 : 점선 테두리 + 배경 없음 + 회색 + "준비중" 배지, 금지 커서
   - 보기만 하는 정보 : 테두리 없는 옅은 배경, 마우스 반응 없음
   ============================================================ */

/* 버튼 공통 상태 */
.gyg-btn-primary:disabled,
.gyg-btn-secondary:disabled,
.gyg-btn-danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}
.gyg-btn-primary:disabled:hover { background: var(--accent); }

.gyg-btn-secondary { transition: border-color 0.15s ease, background 0.15s ease; }
.gyg-btn-secondary:hover:not(:disabled) { border-color: var(--accent); background: #262C36; }

/* 위험 버튼 (삭제 등) */
.gyg-btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid rgba(248,81,73,0.5);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
}
.gyg-btn-danger:hover:not(:disabled) { background: rgba(248,81,73,0.12); border-color: var(--danger); }

/* 텍스트 버튼 (보조 동작 - 밑줄로 눌러지는 것임을 표시) */
.gyg-btn-text {
    background: none;
    border: none;
    color: var(--accent-hover);
    font-size: 13px;
    padding: 4px 2px;
    cursor: pointer;
}
.gyg-btn-text:hover:not(:disabled) { text-decoration: underline; }
.gyg-btn-text:disabled { color: var(--text-faint); cursor: not-allowed; }

/* 키보드로 이동할 때 현재 위치 표시 */
.gyg-btn-primary:focus-visible,
.gyg-btn-secondary:focus-visible,
.gyg-btn-danger:focus-visible,
.gyg-btn-text:focus-visible,
.gyg-tile:focus-visible {
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
}

/* 누를 수 있는 카드 */
.gyg-tile {
    background: var(--bg-panel);
    border: 1px solid #3A424C;
    border-radius: var(--radius-md);
    padding: 18px;
    cursor: pointer;
    color: var(--text-main);
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.gyg-tile:hover { border-color: var(--accent); background: #18222E; transform: translateY(-1px); }
.gyg-tile:active { transform: translateY(0); }
.gyg-tile .gyg-tile-icon { color: var(--accent-hover); }
.gyg-tile .gyg-tile-go { color: var(--text-faint); transition: color 0.15s ease, transform 0.15s ease; }
.gyg-tile:hover .gyg-tile-go { color: var(--accent-hover); transform: translateX(2px); }

/* 준비중 / 사용 불가 카드 */
.gyg-tile-off {
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 18px;
    cursor: not-allowed;
    color: var(--text-faint);
}
.gyg-tile-off .gyg-tile-icon { color: #4A535D; }

/* 보기만 하는 정보 카드 */
.gyg-stat {
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-md);
    padding: 18px;
}

/* 작은 배지 */
.gyg-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(139,148,158,0.15);
    color: var(--text-sub);
    white-space: nowrap;
}
.gyg-badge-soon    { background: rgba(139,148,158,0.12); color: var(--text-faint); border: 1px dashed var(--border); }
.gyg-badge-warning { background: rgba(210,153,34,0.15); color: var(--warning); }
.gyg-badge-accent  { background: rgba(26,127,193,0.15); color: var(--accent-hover); }

/* 텍스트 버튼 - 위험한 동작 (비밀번호 초기화, 비활성화 등) */
.gyg-btn-text.danger { color: var(--danger); }

/* ------------------------------------------------------------
   표 틀고정 : 표가 길어도 페이지 전체가 아니라 표 안에서만 스크롤되고 머리글은 고정
   사용법 : <div class="gyg-table-scroll"><table class="gyg-table"> ... </table></div>
   ------------------------------------------------------------ */
.gyg-table-scroll {
    max-height: calc(100vh - 300px);
    min-height: 240px;
    overflow: auto;
    border-radius: var(--radius-sm);
}
.gyg-table-scroll > table > thead th {   /* 바깥 표의 머리글만 (안쪽 상세 표는 제외) */
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-panel);
    box-shadow: inset 0 -1px 0 var(--border);   /* 고정된 머리글 아래 구분선 (스크롤 중에도 보이게) */
}

/* 표 행에 마우스를 올리면 강조 (행 전체를 누를 수 있는 표에만 .gyg-table-hover 사용) */
.gyg-table-hover tbody tr { cursor: pointer; transition: background 0.1s ease; }
.gyg-table-hover tbody tr:hover td { background: rgba(26,127,193,0.08); }

/* ============================================================
   스마트폰(폭 768px 이하) 공통 보정
   - 모든 화면에 적용. PC 화면에는 영향 없음
   ============================================================ */
@media (max-width: 768px) {
    .gyg-page {
        padding: 16px 12px 40px;
    }

    .gyg-page-header h1 {
        font-size: 20px;
    }

    .gyg-card {
        padding: 16px;
    }

    /* 입력칸 글자가 16px 미만이면 아이폰이 입력할 때 화면을 확대해버리는 문제 방지 */
    .gyg-input {
        font-size: 16px;
    }

    /* 휴대폰에서는 화면 높이가 작아 틀고정 영역을 조금 더 크게 */
    .gyg-table-scroll {
        max-height: calc(100vh - 180px);
    }
}