/* ================================================================
 * Destoon V10 Style Admin CSS
 * ================================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Microsoft YaHei','Helvetica Neue',Arial,sans-serif;font-size:13px;color:#333;background:#eef2f5;}
a{text-decoration:none;color:#337ab7;}
a:hover{color:#23527c;text-decoration:underline;}
ul,li{list-style:none;}

/* ===== Top Navigation Bar ===== */
.dt-topbar{background:#337ab7;height:42px;line-height:42px;display:flex;align-items:center;position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 2px 4px rgba(0,0,0,.15);}
.dt-topbar .dt-logo{background:#2e6da4;color:#fff;padding:0 20px;font-size:16px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:6px;height:42px;}
.dt-topbar .dt-logo i{font-style:normal;font-size:18px;}
.dt-topbar .dt-nav{display:flex;flex:1;height:42px;}
.dt-topbar .dt-nav a{color:#c4dcef;padding:0 18px;font-size:14px;display:flex;align-items:center;gap:4px;border-right:1px solid rgba(255,255,255,.08);transition:background .15s;}
.dt-topbar .dt-nav a:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none;}
.dt-topbar .dt-nav a.active{background:#fff;color:#337ab7;font-weight:600;}
.dt-topbar .dt-user{display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff;}
.dt-topbar .dt-user .dt-uname{color:#d4e6f9;font-size:13px;}
.dt-topbar .dt-user a{color:#fff;font-size:13px;}
.dt-topbar .dt-user a:hover{text-decoration:underline;}
.dt-mobile-toggle{display:none;background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:4px 8px;}

/* ===== Layout ===== */
.dt-wrapper{display:flex;min-height:calc(100vh - 42px);margin-top:42px;}
.dt-sidebar{width:188px;background:#f5f5f5;border-right:1px solid #ddd;position:fixed;top:42px;bottom:0;left:0;overflow-y:auto;z-index:999;transition:transform .25s;}
.dt-sidebar .dt-menu-group{border-bottom:1px solid #e0e0e0;}
.dt-sidebar .dt-menu-group-title{padding:10px 16px 6px;font-size:12px;color:#999;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;user-select:none;}
.dt-sidebar .dt-menu-group-title .dt-arrow{font-size:10px;transition:transform .2s;}
.dt-sidebar .dt-menu-group.collapsed .dt-arrow{transform:rotate(-90deg);}
.dt-sidebar .dt-menu-group.collapsed .dt-menu-items{display:none;}
.dt-sidebar .dt-menu-items{padding:0 0 6px;}
.dt-sidebar .dt-menu-items li a{display:flex;align-items:center;gap:8px;color:#555;padding:8px 16px 8px 28px;border-left:3px solid transparent;font-size:13px;transition:all .12s;}
.dt-sidebar .dt-menu-items li a:hover{background:#e8e8e8;color:#337ab7;text-decoration:none;}
.dt-sidebar .dt-menu-items li a.active{background:#e0ecf7;color:#337ab7;border-left-color:#337ab7;font-weight:600;}
.dt-sidebar .dt-menu-items li a i{font-style:normal;font-size:14px;width:18px;text-align:center;opacity:.7;}

/* ===== Content ===== */
.dt-content{flex:1;margin-left:188px;padding:0;background:#eef2f5;min-height:calc(100vh - 42px);}
.dt-content-body{padding:14px;}

/* ===== Breadcrumb ===== */
.dt-breadcrumb{background:#fff;border-bottom:1px solid #e0e0e0;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;}
.dt-breadcrumb .dt-crumb{display:flex;align-items:center;gap:4px;font-size:13px;color:#666;}
.dt-breadcrumb .dt-crumb a{color:#337ab7;}
.dt-breadcrumb .dt-crumb .sep{color:#ccc;}
.dt-breadcrumb .dt-crumb .current{color:#333;font-weight:600;}
.dt-breadcrumb .dt-actions{display:flex;gap:6px;align-items:center;}

/* ===== Stat Cards ===== */
.dt-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:14px;}
.dt-stat-card{background:#fff;border-radius:6px;padding:16px 18px;box-shadow:0 1px 2px rgba(0,0,0,.06);display:flex;align-items:center;gap:14px;border-left:4px solid #337ab7;}
.dt-stat-card .dt-stat-icon{width:42px;height:42px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.dt-stat-card .dt-stat-info{flex:1;min-width:0;}
.dt-stat-card .dt-stat-label{color:#999;font-size:12px;margin-bottom:2px;}
.dt-stat-card .dt-stat-value{font-size:24px;font-weight:700;color:#333;line-height:1.2;}
.dt-stat-card .dt-stat-extra{font-size:11px;color:#bbb;margin-top:2px;}
.dt-stat-card.dt-stat-blue{border-left-color:#337ab7;}
.dt-stat-card.dt-stat-green{border-left-color:#52c41a;}
.dt-stat-card.dt-stat-orange{border-left-color:#fa8c16;}
.dt-stat-card.dt-stat-red{border-left-color:#ff4d4f;}
.dt-stat-card.dt-stat-purple{border-left-color:#722ed1;}

/* ===== Panel ===== */
.dt-panel{background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.06);margin-bottom:14px;overflow:hidden;border:1px solid #ebebeb;}
.dt-panel-header{padding:10px 16px;border-bottom:1px solid #ebebeb;display:flex;justify-content:space-between;align-items:center;background:#fafafa;}
.dt-panel-title{font-size:14px;font-weight:600;color:#333;display:flex;align-items:center;gap:6px;}
.dt-panel-title i{font-style:normal;font-size:15px;}
.dt-panel-body{padding:16px;}
.dt-panel-body.dt-no-pad{padding:0;}

/* ===== Table ===== */
.dt-table{width:100%;border-collapse:collapse;font-size:13px;}
.dt-table th{background:#f5f5f5;padding:8px 12px;text-align:left;font-weight:600;color:#666;font-size:12px;border-bottom:2px solid #ddd;white-space:nowrap;}
.dt-table td{padding:8px 12px;border-bottom:1px solid #f0f0f0;color:#555;}
.dt-table tr:nth-child(even) td{background:#fafafa;}
.dt-table tr:hover td{background:#e8f0fe;}
.dt-table .dt-checkbox{text-align:center;width:36px;}
.dt-table .dt-checkbox input{cursor:pointer;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.text-muted{color:#999;}
.text-success{color:#52c41a;}
.text-warning{color:#faad14;}
.text-danger{color:#ff4d4f;}
.text-bold{font-weight:600;}
.text-blue{color:#337ab7;}

/* ===== Badge ===== */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:500;line-height:1.4;}
.badge-default{background:#f0f0f0;color:#666;}
.badge-success{background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f;}
.badge-warning{background:#fffbe6;color:#faad14;border:1px solid #ffe58f;}
.badge-danger{background:#fff2f0;color:#ff4d4f;border:1px solid #ffccc7;}
.badge-info{background:#e6f7ff;color:#1890ff;border:1px solid #91d5ff;}
.badge-blue{background:#e6f7ff;color:#1890ff;border:1px solid #91d5ff;}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:6px 14px;border:1px solid #ccc;border-radius:4px;font-size:13px;cursor:pointer;transition:all .15s;background:#fff;color:#555;line-height:1.4;text-decoration:none;}
.btn:hover{border-color:#337ab7;color:#337ab7;text-decoration:none;}
.btn-primary{background:#337ab7;border-color:#337ab7;color:#fff;}
.btn-primary:hover{background:#286090;border-color:#286090;color:#fff;}
.btn-success{background:#5cb85c;border-color:#5cb85c;color:#fff;}
.btn-success:hover{background:#449d44;border-color:#449d44;color:#fff;}
.btn-danger{background:#d9534f;border-color:#d9534f;color:#fff;}
.btn-danger:hover{background:#c9302c;border-color:#c9302c;color:#fff;}
.btn-warning{background:#f0ad4e;border-color:#f0ad4e;color:#fff;}
.btn-warning:hover{background:#ec971f;border-color:#ec971f;color:#fff;}
.btn-info{background:#5bc0de;border-color:#5bc0de;color:#fff;}
.btn-info:hover{background:#46b8da;border-color:#46b8da;color:#fff;}
.btn-default{background:#fff;border-color:#ccc;color:#555;}
.btn-default:hover{border-color:#337ab7;color:#337ab7;}
.btn-link{background:none;border:none;color:#337ab7;padding:0;cursor:pointer;font-size:13px;}
.btn-link:hover{color:#23527c;text-decoration:underline;}
.btn-sm{padding:3px 10px;font-size:12px;border-radius:3px;}
.btn-lg{padding:10px 24px;font-size:16px;}
.btn-login{width:100%;padding:11px;font-size:15px;}

/* ===== Background colors ===== */
.bg-blue{background:#e6f7ff;color:#337ab7;}
.bg-green{background:#f6ffed;color:#52c41a;}
.bg-orange{background:#fff7e6;color:#fa8c16;}
.bg-purple{background:#f9f0ff;color:#722ed1;}
.bg-cyan{background:#e6fffb;color:#13c2c2;}
.bg-red{background:#fff2f0;color:#ff4d4f;}

/* ===== Forms ===== */
.form-group{margin-bottom:14px;}
.form-group label{display:block;margin-bottom:5px;font-weight:600;color:#555;font-size:13px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:7px 10px;border:1px solid #ccc;border-radius:4px;font-size:13px;color:#333;transition:border-color .15s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#337ab7;outline:none;box-shadow:0 0 0 2px rgba(51,122,183,.12);}
.form-group textarea{resize:vertical;min-height:80px;}
.form-check{display:flex;align-items:center;gap:6px;}
.form-check input{width:auto;}
.help-text{color:#999;font-size:12px;margin-top:4px;}
.input-sm{padding:4px 8px;font-size:13px;}

/* ===== Filter Bar ===== */
.filter-bar{background:#fff;border:1px solid #ebebeb;border-radius:6px;padding:12px 16px;margin-bottom:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.filter-item{display:flex;align-items:center;gap:4px;}
.filter-item label{font-size:12px;color:#999;white-space:nowrap;}
.filter-item select,.filter-item input{padding:5px 10px;border:1px solid #ccc;border-radius:4px;font-size:13px;}
.filter-actions{margin-left:auto;display:flex;gap:6px;}

/* ===== Tab Bar (status tabs) ===== */
.dt-tab-bar{display:flex;border-bottom:2px solid #337ab7;margin-bottom:14px;background:#fff;border-radius:6px 6px 0 0;overflow:hidden;}
.dt-tab-bar .dt-tab{padding:8px 20px;font-size:13px;color:#666;cursor:pointer;border-right:1px solid #ebebeb;transition:all .15s;text-decoration:none;display:flex;align-items:center;gap:4px;}
.dt-tab-bar .dt-tab:hover{background:#f5f5f5;color:#337ab7;text-decoration:none;}
.dt-tab-bar .dt-tab.active{background:#337ab7;color:#fff;font-weight:600;}
.dt-tab-bar .dt-tab .dt-tab-count{background:rgba(0,0,0,.1);border-radius:8px;padding:0 6px;font-size:11px;}
.dt-tab-bar .dt-tab.active .dt-tab-count{background:rgba(255,255,255,.25);}

/* ===== Row Actions ===== */
.row-actions{display:flex;gap:4px;align-items:center;}

/* ===== Batch Operations Bar ===== */
.dt-batch-bar{background:#fff;border:1px solid #ebebeb;border-radius:6px;padding:8px 16px;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.dt-batch-bar .dt-batch-info{color:#999;font-size:12px;}

/* ===== Pagination ===== */
.pagination{text-align:center;padding:14px 0;display:flex;justify-content:center;align-items:center;gap:4px;flex-wrap:wrap;}
.pagination a,.pagination span{display:inline-block;padding:5px 11px;border:1px solid #ddd;border-radius:3px;font-size:13px;color:#555;text-decoration:none;}
.pagination a:hover{border-color:#337ab7;color:#337ab7;text-decoration:none;}
.pagination .current{background:#337ab7;color:#fff;border-color:#337ab7;}
.pagination .disabled{color:#ccc;background:#f5f5f5;}
.page-info{color:#999;font-size:12px;margin-right:8px;}

/* ===== Page Header ===== */
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}

/* ===== Modal ===== */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:9999;justify-content:center;align-items:center;}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff;border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,.2);max-width:90vw;max-height:90vh;overflow:auto;animation:modalIn .2s ease;}
@keyframes modalIn{from{transform:scale(.95);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal-sm{width:420px;}
.modal-header{padding:14px 18px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;}
.modal-title{font-size:15px;font-weight:600;color:#333;}
.modal-close{background:none;border:none;font-size:18px;color:#999;cursor:pointer;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:4px;}
.modal-close:hover{background:#f5f5f5;color:#333;}
.modal-body{padding:18px;}
.modal-footer{padding:10px 18px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:8px;}

/* ===== Toast ===== */
.toast-container{position:fixed;top:56px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:8px;max-width:360px;}
.toast{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:5px;box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:13px;animation:toastIn .25s ease;min-width:240px;}
@keyframes toastIn{from{transform:translateX(100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
.toast.fade-out{animation:toastOut .25s ease forwards;}
@keyframes toastOut{to{transform:translateX(100%);opacity:0;}}
.toast-success{background:#f6ffed;border:1px solid #b7eb8f;color:#389e0d;}
.toast-error{background:#fff2f0;border:1px solid #ffccc7;color:#cf1322;}
.toast-warning{background:#fffbe6;border:1px solid #ffe58f;color:#d48806;}
.toast-info{background:#e6f7ff;border:1px solid #91d5ff;color:#096dd9;}
.toast-icon{font-weight:bold;font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.toast-msg{flex:1;}
.toast-close{cursor:pointer;color:#999;font-size:14px;padding:0 4px;}
.toast-close:hover{color:#333;}

/* ===== Empty State ===== */
.empty-state{text-align:center;padding:40px 20px;color:#999;}
.empty-icon{font-size:48px;margin-bottom:12px;}
.empty-text{font-size:14px;}

/* ===== Login Page ===== */
.login-box{background:#fff;border-radius:6px;box-shadow:0 8px 32px rgba(0,0,0,.2);width:360px;max-width:90vw;overflow:hidden;}
.login-header{background:#337ab7;color:#fff;padding:28px 20px;text-align:center;}
.login-header .logo{font-size:22px;font-weight:600;margin-bottom:4px;}
.login-body{padding:28px 24px;}
.login-footer{text-align:center;padding:16px;color:#999;font-size:12px;border-top:1px solid #eee;}
.sep{display:inline-block;margin:0 6px;color:#ccc;}

/* ===== Quick Actions Grid ===== */
.dt-quick-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:14px;}
.dt-quick-action{background:#fff;border:1px solid #ebebeb;border-radius:6px;padding:16px 10px;text-align:center;cursor:pointer;transition:all .15s;text-decoration:none;color:#666;display:block;}
.dt-quick-action:hover{border-color:#337ab7;color:#337ab7;box-shadow:0 2px 8px rgba(51,122,183,.12);text-decoration:none;}
.dt-quick-action .dt-qa-icon{font-size:24px;margin-bottom:6px;}
.dt-quick-action .dt-qa-text{font-size:13px;font-weight:500;}

/* ===== Pending List ===== */
.dt-pending-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f0f0f0;}
.dt-pending-item:last-child{border-bottom:none;}
.dt-pending-item .dt-pending-title{font-size:13px;color:#555;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dt-pending-item .dt-pending-title a{color:#337ab7;}
.dt-pending-item .dt-pending-time{font-size:12px;color:#bbb;margin-left:8px;white-space:nowrap;}

/* ===== Dashboard Layout ===== */
.dt-dash-row{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px;}
.dt-dash-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px;}

/* ===== System Info ===== */
.dt-sys-info{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:12px;}
.dt-sys-info .dt-sys-item{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #f5f5f5;}
.dt-sys-info .dt-sys-key{color:#999;}
.dt-sys-info .dt-sys-val{color:#555;font-weight:500;}

/* ===== Cell ===== */
.cell-id{font-family:monospace;color:#999;font-size:12px;}

/* ===== Sidebar Mask ===== */
.sidebar-mask{display:none;position:fixed;top:42px;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:998;}
.sidebar-mask.show{display:block;}

/* ===== Responsive ===== */
@media(max-width:768px){
    .dt-mobile-toggle{display:block;}
    .dt-sidebar{transform:translateX(-100%);}
    .dt-sidebar.open{transform:translateX(0);}
    .dt-content{margin-left:0;}
    .dt-content-body{padding:10px;}
    .dt-stats{grid-template-columns:repeat(2,1fr);}
    .dt-dash-row{grid-template-columns:1fr;}
    .dt-dash-row-3{grid-template-columns:1fr;}
    .filter-bar{flex-direction:column;align-items:stretch;}
    .filter-actions{margin-left:0;}
    .dt-topbar .dt-nav{display:none;}
}

/* ===== Utility ===== */
.subtitle{color:#999;font-size:13px;margin-top:4px;}
.req{color:#ff4d4f;margin-left:2px;}
.clearfix::after{content:"";display:table;clear:both;}
.mt-14{margin-top:14px;}
.mb-0{margin-bottom:0;}