/* ==========================================================================
   Security 外掛共用樣式（S-03：文字放大 + 後台前台視覺統一 + 前台較好看）
   --------------------------------------------------------------------------
   ■ 後台情境：security 管理路由由 CMS 提供 layout，其 <body> 帶 .admin-page-security
   ■ 前台情境：views/layouts/main.php、登入/入口頁的 <body> 亦標註 admin-page-security
   為達「後台/前台同一套視覺」，所有樣式一律以 body.admin-page-security 為作用域，
   既不污染 CMS 其他管理頁，也讓前台多頁共用同一視覺。
   ========================================================================== */

body.admin-page-security {
    --sec-primary: #1e4f8a;          /* 品牌深藍（後台/前台一致） */
    --sec-primary-2: #2a68b4;
    --sec-gradient: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --sec-accent: #38b6a5;           /* 住戶專區綠（點綴） */
    --sec-bg: #f4f7fb;
    --sec-card-border: #e6ecf4;
    --sec-radius: 0.75rem;
    --sec-shadow: 0 2px 10px rgba(30, 60, 114, 0.06);

    font-size: 1.0625rem;            /* 17px，整體文字放大（Bootstrap 預設 16px） */
}

/* ---------- 版面 ---------- */
body.admin-page-security .main-content {
    min-height: 100vh;
    background: var(--sec-bg);
}

/* 隱藏 CMS 後台側欄 / 調整內容區（後台與前台統一規則） */
body.admin-page-security .admin-sidebar { display: none; }
body.admin-page-security .admin-content {
    margin-left: 0;
    padding: 1.5rem;
}

/* ---------- 導航列（後台/前台一致） ---------- */
body.admin-page-security .security-navbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--sec-card-border);
    box-shadow: 0 1px 4px rgba(30, 60, 114, 0.05);
    padding: 0.7rem 1.5rem;
}
body.admin-page-security .security-navbar .navbar-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sec-primary) !important;
}
body.admin-page-security .security-navbar .navbar-brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--sec-primary) !important;
}

/* ---------- 標題 ---------- */
body.admin-page-security h1, body.admin-page-security h2, body.admin-page-security h3,
body.admin-page-security h4, body.admin-page-security h5, body.admin-page-security h6,
body.admin-page-security .h1, body.admin-page-security .h2, body.admin-page-security .h3,
body.admin-page-security .h4, body.admin-page-security .h5, body.admin-page-security .h6 {
    color: var(--sec-primary);
    font-weight: 700;
}
body.admin-page-security h3 { font-size: 1.6rem; }
body.admin-page-security h4 { font-size: 1.45rem; }
body.admin-page-security h5 { font-size: 1.3rem; }
body.admin-page-security h6 { font-size: 1.1rem; }
body.admin-page-security .text-muted { color: #64748b !important; }

/* ---------- 卡片 ---------- */
body.admin-page-security .card {
    border: 1px solid var(--sec-card-border);
    border-radius: var(--sec-radius);
    box-shadow: var(--sec-shadow);
}
body.admin-page-security .card.shadow-sm,
body.admin-page-security .card.border-0 {
    box-shadow: var(--sec-shadow);
}
body.admin-page-security .card-header {
    background: #f9fbfe;
    border-bottom: 1px solid var(--sec-card-border);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--sec-primary);
    border-radius: calc(var(--sec-radius) - 1px) calc(var(--sec-radius) - 1px) 0 0 !important;
}

/* ---------- 表單：字級放大統一 ---------- */
body.admin-page-security .form-control,
body.admin-page-security .form-select {
    font-size: 1.05rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    border-color: #cbd5e1;
}
body.admin-page-security .form-control:focus,
body.admin-page-security .form-select:focus {
    border-color: var(--sec-primary-2);
    box-shadow: 0 0 0 0.18rem rgba(42, 104, 180, 0.15);
}
body.admin-page-security .form-label {
    font-weight: 600;
    color: #334155;
}
body.admin-page-security .form-control-sm,
body.admin-page-security .form-select-sm {
    font-size: 1rem;
    padding: 0.4rem 0.7rem;
}

/* ---------- 按鈕：統一圓角與立體感 ---------- */
body.admin-page-security .btn {
    border-radius: 0.55rem;
    font-size: 1.02rem;
    font-weight: 600;
}
body.admin-page-security .btn-sm {
    font-size: 0.95rem;
    padding: 0.35rem 0.85rem;
}
body.admin-page-security .btn-primary {
    background-color: var(--sec-primary);
    border-color: var(--sec-primary);
}
body.admin-page-security .btn-primary:hover,
body.admin-page-security .btn-primary:focus {
    background-color: var(--sec-primary-2);
    border-color: var(--sec-primary-2);
}
body.admin-page-security .btn-success {
    background-color: #2e8f6b;
    border-color: #2e8f6b;
}
body.admin-page-security .btn-success:hover,
body.admin-page-security .btn-success:focus {
    background-color: #247a5b;
    border-color: #247a5b;
}

/* ---------- 表格 ---------- */
body.admin-page-security .table { font-size: 1.02rem; }
body.admin-page-security .table thead th {
    background: #eef3fb;
    color: var(--sec-primary);
    font-weight: 700;
    white-space: nowrap;
}
body.admin-page-security .table > :not(caption) > * > * { padding: 0.75rem 0.9rem; }

/* ---------- 標籤 / 徽章 ---------- */
body.admin-page-security .badge {
    font-size: 0.92rem;
    padding: 0.45em 0.7em;
    font-weight: 600;
}

/* ---------- 通知列 ---------- */
body.admin-page-security .alert { font-size: 1.05rem; border-radius: var(--sec-radius); }

/* ---------- 儀表板功能方塊 ---------- */
body.admin-page-security .dashboard-tile .card {
    transition: transform .15s ease, box-shadow .15s ease;
    border-radius: var(--sec-radius);
}
body.admin-page-security .dashboard-tile .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(30, 60, 114, 0.12);
}

/* ---------- 前台登入 / 入口頁共用品牌 ---------- */
body.admin-page-security.security-login-page,
body.admin-page-security.security-landing-page {
    background: var(--sec-gradient);
    min-height: 100vh;
    background-attachment: fixed;
}
body.admin-page-security .auth-brand-icon {
    font-size: 3.5rem;
    color: var(--sec-primary-2);
}
body.admin-page-security .auth-card {
    max-width: 420px;
    margin: 0 auto;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

/* ---------- 入口頁按鈕 ---------- */
body.admin-page-security .entry-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border-radius: 0.9rem;
    text-align: left;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    border: 1px solid rgba(0, 0, 0, .08);
}
body.admin-page-security .entry-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(30, 60, 114, 0.15);
    text-decoration: none;
}
body.admin-page-security .entry-btn .icon-box {
    width: 58px;
    height: 58px;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
body.admin-page-security .entry-btn .entry-title { font-size: 1.35rem; font-weight: 700; }
body.admin-page-security .entry-btn .entry-desc { font-size: 1rem; color: #64748b; }
body.admin-page-security .btn-resident { background: #e8f5e9; color: #1f7a4d; }
body.admin-page-security .btn-resident:hover { background: #d9efe0; color: #1f7a4d; }
body.admin-page-security .btn-guard { background: #e8f0fe; color: #1a56db; }
body.admin-page-security .btn-guard:hover { background: #dae6fb; color: #1a56db; }
body.admin-page-security .btn-admin { background: #fef3cd; color: #92400e; }
body.admin-page-security .btn-admin:hover { background: #fbecc0; color: #92400e; }
body.admin-page-security .footer-note { font-size: 0.95rem; color: rgba(255, 255, 255, .78); }