/* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 1 / 10 Module : Base Card Framework Version : 3.0.0 Enterprise Author : OpenAI ========================================================== */ /* ========================================================== BASE CARD ========================================================== */ .card, .admin-card, .page-card, .table-card, .filter-card, .dashboard-card, .stat-card, .info-card, .profile-card, .widget-card, .report-card{ position:relative; display:flex; flex-direction:column; width:100%; min-width:0; background:var(--card-bg); color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); overflow:hidden; transition: background-color .30s ease, border-color .30s ease, box-shadow .30s ease, transform .30s ease; } /* ========================================================== CARD HOVER ========================================================== */ .card:hover, .admin-card:hover, .page-card:hover, .table-card:hover, .filter-card:hover, .dashboard-card:hover, .stat-card:hover, .info-card:hover, .profile-card:hover, .widget-card:hover, .report-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); } /* ========================================================== CARD ACTIVE ========================================================== */ .card-active{ border-color:var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,.10), var(--shadow-md); } /* ========================================================== CARD DISABLED ========================================================== */ .card-disabled{ opacity:.65; pointer-events:none; filter:grayscale(.15); } /* ========================================================== CARD SIZES ========================================================== */ .card-xs{ border-radius:var(--radius-xs); } .card-sm{ border-radius:var(--radius-sm); } .card-md{ border-radius:var(--radius-md); } .card-lg{ border-radius:var(--radius-lg); } .card-xl{ border-radius:var(--radius-xl); } .card-pill{ border-radius:var(--radius-round); } /* ========================================================== CARD STYLE ========================================================== */ .card-flat{ box-shadow:none; } .card-outline{ box-shadow:none; border:2px solid var(--border); } .card-borderless{ border:none; } .card-transparent{ background:transparent; box-shadow:none; } /* ========================================================== BORDER ACCENT ========================================================== */ .card-primary{ border-top:4px solid var(--primary); } .card-success{ border-top:4px solid var(--success); } .card-info{ border-top:4px solid var(--info); } .card-warning{ border-top:4px solid var(--warning); } .card-danger{ border-top:4px solid var(--danger); } .card-secondary{ border-top:4px solid var(--secondary); } /* ========================================================== SOLID BACKGROUND ========================================================== */ .card-bg-primary{ background:var(--primary); color:#fff; } .card-bg-success{ background:var(--success); color:#fff; } .card-bg-info{ background:var(--info); color:#fff; } .card-bg-warning{ background:var(--warning); color:#fff; } .card-bg-danger{ background:var(--danger); color:#fff; } /* ========================================================== GRADIENT BACKGROUND ========================================================== */ .card-gradient-primary{ background:var(--gradient-primary); color:#fff; border:none; } .card-gradient-success{ background:var(--gradient-success); color:#fff; border:none; } .card-gradient-info{ background:var(--gradient-info); color:#fff; border:none; } .card-gradient-warning{ background:var(--gradient-warning); color:#fff; border:none; } .card-gradient-danger{ background:var(--gradient-danger); color:#fff; border:none; } .card-gradient-dark{ background:var(--gradient-dark); color:#fff; border:none; } /* ========================================================== GLASS CARD ========================================================== */ .card-glass{ background:rgba(255,255,255,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.30); } /* ========================================================== SHADOW LEVEL ========================================================== */ .card-shadow-none{ box-shadow:none; } .card-shadow-xs{ box-shadow:var(--shadow-xs); } .card-shadow-sm{ box-shadow:var(--shadow-sm); } .card-shadow-md{ box-shadow:var(--shadow-md); } .card-shadow-lg{ box-shadow:var(--shadow-lg); } .card-shadow-xl{ box-shadow:var(--shadow-xl); } /* ========================================================== CARD WIDTH ========================================================== */ .card-w-auto{ width:auto; } .card-w-25{ width:25%; } .card-w-50{ width:50%; } .card-w-75{ width:75%; } .card-w-100{ width:100%; } /* ========================================================== CARD HEIGHT ========================================================== */ .card-h-auto{ height:auto; } .card-h-100{ height:100%; } .card-min-h-100{ min-height:100px; } .card-min-h-200{ min-height:200px; } .card-min-h-300{ min-height:300px; } /* ========================================================== POSITION ========================================================== */ .card-relative{ position:relative; } .card-absolute{ position:absolute; } .card-fixed{ position:fixed; } .card-sticky{ position:sticky; top:0; z-index:10; } /* ========================================================== DISPLAY ========================================================== */ .card-flex{ display:flex; } .card-grid{ display:grid; } .card-block{ display:block; } .card-inline{ display:inline-flex; } /* ========================================================== FLEX HELPERS ========================================================== */ .card-row{ display:flex; flex-direction:row; } .card-column{ display:flex; flex-direction:column; } .card-center{ display:flex; align-items:center; justify-content:center; } .card-between{ display:flex; align-items:center; justify-content:space-between; } .card-around{ display:flex; justify-content:space-around; } .card-evenly{ display:flex; justify-content:space-evenly; } /* ========================================================== GAP ========================================================== */ .card-gap-xs{ gap:var(--space-xs); } .card-gap-sm{ gap:var(--space-sm); } .card-gap-md{ gap:var(--space-md); } .card-gap-lg{ gap:var(--space-lg); } .card-gap-xl{ gap:var(--space-xl); } /* ========================================================== OVERFLOW ========================================================== */ .card-scroll{ overflow:auto; } .card-hidden{ overflow:hidden; } .card-visible{ overflow:visible; } /* ========================================================== END OF PART - 1 ========================================================== */ /* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 2 / 10 Module : Header • Body • Footer Version : 3.0.0 Enterprise ========================================================== */ /* ========================================================== CARD HEADER ========================================================== */ .card-header{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); padding:20px 24px; background:var(--card-header-bg); border-bottom:1px solid var(--border); } /* ========================================================== HEADER SIZES ========================================================== */ .card-header-xs{ padding:10px 14px; } .card-header-sm{ padding:16px 20px; } .card-header-lg{ padding:28px 32px; } /* ========================================================== HEADER ALIGNMENT ========================================================== */ .card-header-start{ justify-content:flex-start; } .card-header-center{ justify-content:center; } .card-header-end{ justify-content:flex-end; } .card-header-between{ justify-content:space-between; } /* ========================================================== HEADER LEFT ========================================================== */ .card-header-left{ display:flex; align-items:center; gap:16px; flex:1; min-width:0; } /* ========================================================== HEADER RIGHT ========================================================== */ .card-header-right{ display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; } /* ========================================================== HEADER ICON ========================================================== */ .card-header-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--gradient-primary); color:#fff; font-size:18px; } /* ========================================================== HEADER CONTENT ========================================================== */ .card-header-content{ flex:1; min-width:0; } /* ========================================================== TITLE ========================================================== */ .card-title{ margin:0; color:var(--text-heading); font-size:1.15rem; font-weight:700; line-height:1.35; } /* ========================================================== SUBTITLE ========================================================== */ .card-subtitle{ margin-top:6px; color:var(--text-muted); font-size:.90rem; line-height:1.6; } /* ========================================================== BADGE ========================================================== */ .card-badge{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--custom); color:var(--primary); font-size:12px; font-weight:600; } /* ========================================================== TOOLBAR ========================================================== */ .card-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* ========================================================== ACTIONS ========================================================== */ .card-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* ========================================================== BODY ========================================================== */ .card-body{ position:relative; flex:1; padding:24px; } /* ========================================================== BODY SIZE ========================================================== */ .card-body-xs{ padding:12px; } .card-body-sm{ padding:18px; } .card-body-lg{ padding:32px; } .card-body-xl{ padding:40px; } /* ========================================================== BODY ALIGNMENT ========================================================== */ .card-body-center{ display:flex; align-items:center; justify-content:center; text-align:center; } .card-body-start{ text-align:left; } .card-body-end{ text-align:right; } /* ========================================================== BODY GRID ========================================================== */ .card-body-grid{ display:grid; gap:20px; } .card-body-flex{ display:flex; gap:20px; } /* ========================================================== SECTION ========================================================== */ .card-section{ padding:20px 24px; border-top:1px solid var(--border); } .card-section:first-child{ border-top:none; } /* ========================================================== DIVIDER ========================================================== */ .card-divider{ width:100%; height:1px; margin:20px 0; background:var(--border); } /* ========================================================== FOOTER ========================================================== */ .card-footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; background:var(--card-footer-bg); border-top:1px solid var(--border); } /* ========================================================== FOOTER LEFT ========================================================== */ .card-footer-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } /* ========================================================== FOOTER RIGHT ========================================================== */ .card-footer-right{ display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; margin-left:auto; } /* ========================================================== FOOTER CENTER ========================================================== */ .card-footer-center{ display:flex; align-items:center; justify-content:center; flex:1; } /* ========================================================== FOOTER TEXT ========================================================== */ .card-footer-text{ font-size:.875rem; color:var(--text-muted); } /* ========================================================== STICKY HEADER ========================================================== */ .card-sticky-header .card-header{ position:sticky; top:0; z-index:20; } /* ========================================================== STICKY FOOTER ========================================================== */ .card-sticky-footer .card-footer{ position:sticky; bottom:0; z-index:20; } /* ========================================================== BORDERLESS ========================================================== */ .card-header-borderless{ border-bottom:none; } .card-footer-borderless{ border-top:none; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:768px){ .card-header, .card-footer{ flex-direction:column; align-items:flex-start; } .card-header-right, .card-footer-right{ width:100%; justify-content:flex-start; margin-left:0; } .card-body{ padding:18px; } } /* ========================================================== END OF PART - 2 ========================================================== */ /* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 3 / 10 Module : Page • Table • Filter Cards Version : 3.0.0 Enterprise ========================================================== */ /* ========================================================== PAGE CARD ========================================================== */ .page-card{ min-height:100%; display:flex; flex-direction:column; } /* ========================================================== PAGE HEADER ========================================================== */ .page-card-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; border-bottom:1px solid var(--border); } /* ========================================================== PAGE CONTENT ========================================================== */ .page-card-content{ flex:1; padding:24px; } /* ========================================================== PAGE FOOTER ========================================================== */ .page-card-footer{ padding:20px 24px; background:var(--card-footer-bg); border-top:1px solid var(--border); } /* ========================================================== PAGE TOOLBAR ========================================================== */ .page-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } /* ========================================================== PAGE ACTIONS ========================================================== */ .page-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* ========================================================== TABLE CARD ========================================================== */ .table-card{ overflow:hidden; } /* ========================================================== TABLE HEADER ========================================================== */ .table-card-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; border-bottom:1px solid var(--border); } /* ========================================================== TABLE BODY ========================================================== */ .table-card-body{ overflow:auto; padding:0; } /* ========================================================== TABLE FOOTER ========================================================== */ .table-card-footer{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; border-top:1px solid var(--border); } /* ========================================================== TABLE SEARCH ========================================================== */ .table-search{ display:flex; align-items:center; gap:10px; } /* ========================================================== TABLE FILTERS ========================================================== */ .table-filters{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } /* ========================================================== TABLE ACTIONS ========================================================== */ .table-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; } /* ========================================================== RESPONSIVE TABLE ========================================================== */ .table-responsive-card{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* ========================================================== FILTER CARD ========================================================== */ .filter-card{ padding:24px; } /* ========================================================== FILTER HEADER ========================================================== */ .filter-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; } /* ========================================================== FILTER GRID ========================================================== */ .filter-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; } /* ========================================================== FILTER GROUP ========================================================== */ .filter-group{ display:flex; flex-direction:column; gap:8px; } /* ========================================================== FILTER LABEL ========================================================== */ .filter-label{ font-size:.875rem; font-weight:600; color:var(--text-secondary); } /* ========================================================== FILTER ACTION ========================================================== */ .filter-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:24px; flex-wrap:wrap; } /* ========================================================== FILTER INLINE ========================================================== */ .filter-inline{ display:flex; align-items:end; gap:16px; flex-wrap:wrap; } /* ========================================================== SEARCH BOX ========================================================== */ .card-search{ position:relative; width:100%; max-width:320px; } .card-search input{ width:100%; padding-left:42px; } .card-search i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); } /* ========================================================== CARD PAGINATION ========================================================== */ .card-pagination{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } /* ========================================================== CARD META ========================================================== */ .card-meta{ font-size:.875rem; color:var(--text-muted); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:992px){ .page-toolbar, .table-card-header, .table-card-footer, .filter-header{ flex-wrap:wrap; } } @media (max-width:768px){ .page-card-header, .table-card-header, .table-card-footer, .page-toolbar, .filter-header{ flex-direction:column; align-items:flex-start; } .page-card-content, .filter-card{ padding:18px; } .filter-grid{ grid-template-columns:1fr; } .card-search{ max-width:100%; } } @media (max-width:576px){ .page-card-header, .page-card-content, .page-card-footer, .table-card-header, .table-card-footer{ padding:16px; } } /* ========================================================== END OF PART - 3 ========================================================== */ /* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 4 / 10 Module : Dashboard • Statistics • Info • Profile Cards Version : 3.0.0 Enterprise ========================================================== */ ========================================================== DASHBOARD FOOTER ========================================================== .dashboard-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; } ========================================================== DASHBOARD LINK ========================================================== .dashboard-link{ display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-weight:600; text-decoration:none; transition:.25s; } .dashboard-link:hover{ color:var(--primary-hover); } ========================================================== TREND ========================================================== .dashboard-trend{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; } .dashboard-trend.up{ color:var(--success); } .dashboard-trend.down{ color:var(--danger); } /* ========================================================== STAT CARD ========================================================== */ .stat-card{ padding:24px; } /* ========================================================== STAT HEADER ========================================================== */ .stat-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; } /* ========================================================== STAT ICON ========================================================== */ .stat-icon{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:var(--gradient-light); color:var(--primary); font-size:22px; } /* ========================================================== STAT LABEL ========================================================== */ .stat-label{ font-size:14px; color:var(--text-muted); } /* ========================================================== STAT VALUE ========================================================== */ .stat-value{ margin-top:8px; font-size:2rem; font-weight:700; color:var(--text-heading); } /* ========================================================== STAT FOOTER ========================================================== */ .stat-footer{ margin-top:18px; display:flex; justify-content:space-between; align-items:center; } /* ========================================================== INFO CARD ========================================================== */ .info-card{ display:flex; align-items:flex-start; gap:18px; padding:24px; } /* ========================================================== INFO ICON ========================================================== */ .info-icon{ width:58px; height:58px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:16px; background:var(--gradient-primary); color:#fff; font-size:22px; } /* ========================================================== INFO CONTENT ========================================================== */ .info-content{ flex:1; } /* ========================================================== INFO TITLE ========================================================== */ .info-title{ margin:0; font-size:17px; font-weight:700; color:var(--text-heading); } /* ========================================================== INFO TEXT ========================================================== */ .info-text{ margin-top:8px; color:var(--text-muted); line-height:1.7; } /* ========================================================== PROFILE CARD ========================================================== */ .profile-card{ align-items:center; text-align:center; padding:32px 24px; } /* ========================================================== PROFILE AVATAR ========================================================== */ .profile-avatar{ width:110px; height:110px; border-radius:50%; overflow:hidden; border:5px solid var(--border); margin-bottom:20px; background:var(--body-bg); } .profile-avatar img{ width:100%; height:100%; object-fit:cover; } /* ========================================================== PROFILE NAME ========================================================== */ .profile-name{ margin:0; font-size:22px; font-weight:700; color:var(--text-heading); } /* ========================================================== PROFILE DESIGNATION ========================================================== */ .profile-designation{ margin-top:6px; color:var(--text-muted); font-size:15px; } /* ========================================================== PROFILE META ========================================================== */ .profile-meta{ width:100%; margin-top:24px; display:grid; gap:14px; } /* ========================================================== PROFILE ITEM ========================================================== */ .profile-item{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); } .profile-item:last-child{ border-bottom:none; } /* ========================================================== PROFILE LABEL ========================================================== */ .profile-label{ color:var(--text-muted); font-weight:500; } /* ========================================================== PROFILE VALUE ========================================================== */ .profile-value{ color:var(--text-heading); font-weight:600; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:768px){ .dashboard-card, .stat-card, .profile-card, .info-card{ padding:18px; } .dashboard-value, .stat-value{ font-size:1.6rem; } .profile-avatar{ width:90px; height:90px; } } /* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 5 / 10 Module : Empty • Loading • Skeleton Cards Version : 3.0.0 Enterprise ========================================================== */ /* ========================================================== EMPTY CARD ========================================================== */ .empty-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:320px; padding:48px 32px; } /* ========================================================== EMPTY ICON ========================================================== */ .empty-icon{ width:96px; height:96px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--gradient-light); color:var(--primary); font-size:42px; box-shadow:var(--shadow-sm); } /* ========================================================== EMPTY TITLE ========================================================== */ .empty-title{ margin-top:24px; font-size:1.4rem; font-weight:700; color:var(--text-heading); } /* ========================================================== EMPTY TEXT ========================================================== */ .empty-text{ max-width:520px; margin-top:12px; color:var(--text-muted); line-height:1.8; } /* ========================================================== EMPTY ACTION ========================================================== */ .empty-action{ margin-top:28px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; } /* ========================================================== LOADING CARD ========================================================== */ .loading-card{ position:relative; overflow:hidden; pointer-events:none; user-select:none; } /* ========================================================== LOADING OVERLAY ========================================================== */ .loading-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.75); backdrop-filter:blur(2px); z-index:20; } /* ========================================================== LOADING SPINNER ========================================================== */ .loading-spinner{ width:48px; height:48px; border:4px solid rgba(0,0,0,.08); border-top-color:var(--primary); border-radius:50%; animation:cardSpinner .8s linear infinite; } @keyframes cardSpinner{ to{ transform:rotate(360deg); } } /* ========================================================== LOADING TEXT ========================================================== */ .loading-text{ margin-top:16px; font-size:14px; color:var(--text-muted); } /* ========================================================== SKELETON ========================================================== */ .skeleton{ position:relative; overflow:hidden; background:#edf2f7; border-radius:10px; } .skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255,255,255,.75), transparent ); animation:skeletonAnimation 1.4s infinite; } @keyframes skeletonAnimation{ 100%{ transform:translateX(100%); } } /* ========================================================== SKELETON SIZES ========================================================== */ .skeleton-title{ width:65%; height:22px; margin-bottom:18px; } .skeleton-subtitle{ width:40%; height:16px; margin-bottom:24px; } .skeleton-text{ width:100%; height:14px; margin-bottom:12px; } .skeleton-text:last-child{ width:70%; } .skeleton-avatar{ width:72px; height:72px; border-radius:50%; } .skeleton-button{ width:140px; height:42px; border-radius:10px; } .skeleton-image{ width:100%; height:220px; border-radius:12px; } /* ========================================================== DASHBOARD SKELETON ========================================================== */ .dashboard-skeleton{ display:flex; flex-direction:column; gap:18px; } .dashboard-skeleton .skeleton-icon{ width:64px; height:64px; border-radius:16px; } .dashboard-skeleton .skeleton-value{ width:90px; height:34px; } .dashboard-skeleton .skeleton-label{ width:140px; height:16px; } /* ========================================================== TABLE SKELETON ========================================================== */ .table-skeleton{ display:grid; gap:12px; } .table-skeleton-row{ height:48px; } /* ========================================================== PROFILE SKELETON ========================================================== */ .profile-skeleton{ display:flex; flex-direction:column; align-items:center; gap:16px; } /* ========================================================== SHIMMER EFFECT ========================================================== */ .shimmer{ position:relative; overflow:hidden; } .shimmer::before{ content:""; position:absolute; inset:0; background: linear-gradient( 110deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75% ); animation:shimmerMove 1.5s infinite; } @keyframes shimmerMove{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:768px){ .empty-card{ min-height:260px; padding:32px 20px; } .empty-icon{ width:72px; height:72px; font-size:30px; } .empty-title{ font-size:1.2rem; } } /* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 6 / 10 Module : Ribbon • Badge • Status • Overlay • Utilities Version : 3.0.0 Enterprise ========================================================== */ /* ========================================================== CARD RIBBON ========================================================== */ .card-ribbon{ position:absolute; top:18px; right:-42px; width:160px; padding:7px 0; text-align:center; font-size:12px; font-weight:700; color:#fff; background:var(--gradient-danger); transform:rotate(45deg); z-index:5; box-shadow:var(--shadow-sm); } .card-ribbon-primary{ background:var(--gradient-primary); } .card-ribbon-success{ background:var(--gradient-success); } .card-ribbon-warning{ background:var(--gradient-warning); } .card-ribbon-danger{ background:var(--gradient-danger); } .card-ribbon-info{ background:var(--gradient-info); } /* ========================================================== CARD STATUS ========================================================== */ .card-status{ position:absolute; top:18px; right:18px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; z-index:3; } .card-status-success{ background:#dcfce7; color:#166534; } .card-status-warning{ background:#fef3c7; color:#92400e; } .card-status-danger{ background:#fee2e2; color:#991b1b; } .card-status-info{ background:#dbeafe; color:#1d4ed8; } .card-status-secondary{ background:#e2e8f0; color:#334155; } /* ========================================================== CARD BADGE ========================================================== */ .card-badge{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; } .card-badge-primary{ background:#dbeafe; color:#1d4ed8; } .card-badge-success{ background:#dcfce7; color:#166534; } .card-badge-warning{ background:#fef3c7; color:#92400e; } .card-badge-danger{ background:#fee2e2; color:#991b1b; } .card-badge-info{ background:#cffafe; color:#155e75; } /* ========================================================== CARD OVERLAY ========================================================== */ .card-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:all .30s ease; z-index:20; } .card:hover .card-overlay{ opacity:1; visibility:visible; } /* ========================================================== CARD OVERLAY CONTENT ========================================================== */ .card-overlay-content{ text-align:center; color:#fff; padding:20px; } /* ========================================================== CARD OVERLAY BUTTON ========================================================== */ .card-overlay .btn{ margin-top:15px; } /* ========================================================== CARD WATERMARK ========================================================== */ .card-watermark{ position:absolute; right:-20px; bottom:-20px; font-size:110px; color:rgba(255,255,255,.05); pointer-events:none; z-index:0; } /* ========================================================== CARD CORNER ICON ========================================================== */ .card-corner-icon{ position:absolute; top:15px; left:15px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.15); color:#fff; } /* ========================================================== CARD HIGHLIGHT ========================================================== */ .card-highlight{ border-left:5px solid var(--primary); } .card-highlight-success{ border-left-color:var(--success); } .card-highlight-warning{ border-left-color:var(--warning); } .card-highlight-danger{ border-left-color:var(--danger); } .card-highlight-info{ border-left-color:var(--info); } /* ========================================================== CARD SEPARATOR ========================================================== */ .card-separator{ width:100%; height:1px; margin:24px 0; background:var(--border); } /* ========================================================== CARD LIST ========================================================== */ .card-list{ display:flex; flex-direction:column; gap:14px; } .card-list-item{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); } .card-list-item:last-child{ border-bottom:none; } /* ========================================================== CARD TIMELINE ========================================================== */ .card-timeline{ position:relative; padding-left:28px; } .card-timeline::before{ content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--border); } .card-timeline-item{ position:relative; margin-bottom:24px; } .card-timeline-item::before{ content:""; position:absolute; left:-22px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--primary); } /* ========================================================== CARD FLOAT ACTION ========================================================== */ .card-fab{ position:absolute; right:20px; bottom:20px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-md); transition:.30s; } .card-fab:hover{ transform:scale(1.08); } /* ========================================================== CARD STRETCH ========================================================== */ .card-stretch{ height:100%; } /* ========================================================== CARD CENTER ========================================================== */ .card-center{ display:flex; align-items:center; justify-content:center; } /* ========================================================== CARD ROUNDED ========================================================== */ .card-rounded{ border-radius:999px; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:768px){ .card-ribbon{ width:135px; font-size:11px; right:-36px; } .card-watermark{ font-size:80px; } } /* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 7 / 10 Module : Utilities • Effects • Animations • Helpers Version : 3.0.0 Enterprise ========================================================== */ /* ========================================================== CARD WIDTH ========================================================== */ .card-w-auto{ width:auto; } .card-w-25{ width:25%; } .card-w-50{ width:50%; } .card-w-75{ width:75%; } .card-w-100{ width:100%; } /* ========================================================== CARD HEIGHT ========================================================== */ .card-h-auto{ height:auto; } .card-h-100{ height:100%; } .card-min-h-100{ min-height:100px; } .card-min-h-200{ min-height:200px; } .card-min-h-300{ min-height:300px; } .card-min-h-400{ min-height:400px; } .card-min-h-500{ min-height:500px; } /* ========================================================== SPACING ========================================================== */ .card-p-0{ padding:0; } .card-p-sm{ padding:16px; } .card-p{ padding:24px; } .card-p-lg{ padding:32px; } .card-m-0{ margin:0; } .card-m{ margin:24px; } .card-mb{ margin-bottom:24px; } .card-mt{ margin-top:24px; } /* ========================================================== FLEX UTILITIES ========================================================== */ .card-flex{ display:flex; } .card-inline-flex{ display:inline-flex; } .card-flex-column{ flex-direction:column; } .card-flex-row{ flex-direction:row; } .card-align-center{ align-items:center; } .card-align-start{ align-items:flex-start; } .card-align-end{ align-items:flex-end; } .card-justify-center{ justify-content:center; } .card-justify-between{ justify-content:space-between; } .card-justify-end{ justify-content:flex-end; } /* ========================================================== GRID ========================================================== */ .card-grid{ display:grid; gap:20px; } .card-grid-2{ grid-template-columns:repeat(2,1fr); } .card-grid-3{ grid-template-columns:repeat(3,1fr); } .card-grid-4{ grid-template-columns:repeat(4,1fr); } .card-grid-auto{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } /* ========================================================== GAP ========================================================== */ .card-gap-xs{ gap:6px; } .card-gap-sm{ gap:12px; } .card-gap{ gap:20px; } .card-gap-lg{ gap:30px; } /* ========================================================== POSITION ========================================================== */ .card-relative{ position:relative; } .card-absolute{ position:absolute; } .card-sticky{ position:sticky; top:0; z-index:10; } /* ========================================================== OVERFLOW ========================================================== */ .card-overflow-hidden{ overflow:hidden; } .card-overflow-auto{ overflow:auto; } .card-overflow-visible{ overflow:visible; } /* ========================================================== IMAGE ========================================================== */ .card-image{ width:100%; display:block; object-fit:cover; } .card-image-cover{ object-fit:cover; } .card-image-contain{ object-fit:contain; } /* ========================================================== HOVER EFFECT ========================================================== */ .card-hover-lift:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); } .card-hover-scale:hover{ transform:scale(1.02); } .card-hover-shadow:hover{ box-shadow:var(--shadow-xl); } .card-hover-border:hover{ border-color:var(--primary); } /* ========================================================== ANIMATION ========================================================== */ .card-fade-in{ animation:cardFade .45s ease; } @keyframes cardFade{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:none; } } .card-slide-up{ animation:cardSlideUp .5s ease; } @keyframes cardSlideUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } } .card-zoom-in{ animation:cardZoom .35s ease; } @keyframes cardZoom{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } } /* ========================================================== SHADOW HELPERS ========================================================== */ .shadow-none{ box-shadow:none!important; } .shadow-xs{ box-shadow:var(--shadow-xs); } .shadow-sm{ box-shadow:var(--shadow-sm); } .shadow-md{ box-shadow:var(--shadow-md); } .shadow-lg{ box-shadow:var(--shadow-lg); } .shadow-xl{ box-shadow:var(--shadow-xl); } /* ========================================================== BORDER RADIUS ========================================================== */ .radius-xs{ border-radius:var(--radius-xs); } .radius-sm{ border-radius:var(--radius-sm); } .radius-md{ border-radius:var(--radius-md); } .radius-lg{ border-radius:var(--radius-lg); } .radius-xl{ border-radius:var(--radius-xl); } .radius-round{ border-radius:999px; } /* ========================================================== CURSOR ========================================================== */ .cursor-pointer{ cursor:pointer; } .cursor-default{ cursor:default; } /* ========================================================== USER SELECT ========================================================== */ .no-select{ user-select:none; } .select-all{ user-select:all; } /* ========================================================== Z-INDEX ========================================================== */ .z-1{ z-index:1; } .z-10{ z-index:10; } .z-100{ z-index:100; } /* ========================================================== VISIBILITY ========================================================== */ .hidden{ display:none!important; } .visible{ display:block!important; } /* ========================================================== END OF PART 7 ========================================================== */ /* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 8 / 10 Module : Responsive • Dark Mode Version : 3.0.0 Enterprise ========================================================== */ /* ========================================================== LARGE DESKTOP ========================================================== */ @media (max-width:1400px){ .dashboard-card{ min-height:170px; } .dashboard-value{ font-size:1.85rem; } } /* ========================================================== LAPTOP ========================================================== */ @media (max-width:1200px){ .card-header, .card-body, .card-footer{ padding:20px; } .dashboard-card{ min-height:165px; } .dashboard-icon{ width:58px; height:58px; font-size:22px; } .dashboard-value{ font-size:1.70rem; } .profile-avatar{ width:100px; height:100px; } } /* ========================================================== TABLET ========================================================== */ @media (max-width:992px){ .card-header, .card-footer, .page-card-header, .table-card-header, .table-card-footer{ flex-wrap:wrap; } .card-header-right, .card-footer-right{ width:100%; justify-content:flex-start; margin-left:0; } .card-grid-4{ grid-template-columns:repeat(2,1fr); } .card-grid-3{ grid-template-columns:repeat(2,1fr); } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:768px){ .card-header, .card-footer, .page-card-header, .table-card-header, .table-card-footer{ flex-direction:column; align-items:flex-start; gap:16px; } .card-body, .page-card-content, .filter-card{ padding:18px; } .dashboard-card{ min-height:auto; padding:18px; } .dashboard-header{ flex-direction:column; gap:16px; } .dashboard-icon{ width:52px; height:52px; border-radius:14px; font-size:20px; } .dashboard-value{ font-size:1.5rem; } .dashboard-title{ font-size:14px; } .profile-card{ padding:24px 18px; } .profile-avatar{ width:85px; height:85px; } .profile-name{ font-size:20px; } .info-card{ flex-direction:column; text-align:center; } .info-icon{ margin:auto; } .card-grid-2, .card-grid-3, .card-grid-4{ grid-template-columns:1fr; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width:576px){ .card{ border-radius:var(--radius-md); } .card-header, .card-body, .card-footer{ padding:16px; } .card-title{ font-size:1rem; } .card-subtitle{ font-size:.82rem; } .dashboard-value{ font-size:1.35rem; } .dashboard-link{ font-size:.82rem; } .empty-card{ min-height:220px; } .empty-icon{ width:70px; height:70px; font-size:28px; } } /* ========================================================== EXTRA SMALL ========================================================== */ @media (max-width:400px){ .card-header, .card-body, .card-footer{ padding:14px; } .dashboard-card{ padding:16px; } .profile-avatar{ width:72px; height:72px; } .profile-name{ font-size:18px; } } /* ========================================================== DARK MODE ========================================================== */ [data-theme="dark"] .card, [data-theme="dark"] .admin-card, [data-theme="dark"] .page-card, [data-theme="dark"] .table-card, [data-theme="dark"] .filter-card, [data-theme="dark"] .dashboard-card, [data-theme="dark"] .profile-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .info-card{ background:var(--card-bg); border-color:var(--border); color:var(--text-primary); } [data-theme="dark"] .card-header, [data-theme="dark"] .page-card-header, [data-theme="dark"] .table-card-header{ background:var(--card-header-bg); border-color:var(--border); } [data-theme="dark"] .card-footer, [data-theme="dark"] .page-card-footer, [data-theme="dark"] .table-card-footer{ background:var(--card-footer-bg); border-color:var(--border); } [data-theme="dark"] .card-title, [data-theme="dark"] .dashboard-value, [data-theme="dark"] .profile-name, [data-theme="dark"] .stat-value, [data-theme="dark"] .info-title{ color:var(--text-heading); } [data-theme="dark"] .card-subtitle, [data-theme="dark"] .dashboard-title, [data-theme="dark"] .profile-designation, [data-theme="dark"] .stat-label, [data-theme="dark"] .info-text{ color:var(--text-muted); } [data-theme="dark"] .skeleton{ background:#334155; } [data-theme="dark"] .loading-overlay{ background:rgba(15,23,42,.65); } [data-theme="dark"] .card-status-success{ background:rgba(22,163,74,.18); } [data-theme="dark"] .card-status-warning{ background:rgba(245,158,11,.18); } [data-theme="dark"] .card-status-danger{ background:rgba(220,38,38,.18); } [data-theme="dark"] .card-status-info{ background:rgba(14,165,233,.18); } /* ========================================================== DARK MODE SCROLLBAR ========================================================== */ [data-theme="dark"] .card-scroll::-webkit-scrollbar{ width:8px; height:8px; } [data-theme="dark"] .card-scroll::-webkit-scrollbar-thumb{ background:#475569; border-radius:999px; } [data-theme="dark"] .card-scroll::-webkit-scrollbar-thumb:hover{ background:#64748b; } /* ========================================================== END OF PART 8 ========================================================== */ /* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 9 / 10 Module : Print • Accessibility • RTL • Scrollbar Version : 3.0.0 Enterprise ========================================================== */ /* ========================================================== PRINT MODE ========================================================== */ @media print{ *{ box-shadow:none !important; text-shadow:none !important; animation:none !important; transition:none !important; } body{ background:#ffffff !important; } .card, .admin-card, .dashboard-card, .page-card, .table-card, .profile-card, .info-card, .stat-card{ border:1px solid #d1d5db !important; box-shadow:none !important; page-break-inside:avoid; break-inside:avoid; background:#ffffff !important; } .card-header, .card-footer{ background:#ffffff !important; } .card-ribbon, .card-overlay, .loading-overlay, .card-fab{ display:none !important; } } /* ========================================================== ACCESSIBILITY ========================================================== */ .card:focus, .card:focus-visible{ outline:3px solid rgba(37,99,235,.30); outline-offset:3px; } .card a:focus, .card button:focus, .card input:focus, .card select:focus, .card textarea:focus{ outline:2px solid var(--primary); outline-offset:2px; } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /* ========================================================== RTL SUPPORT ========================================================== */ [dir="rtl"] .card-header, [dir="rtl"] .card-footer, [dir="rtl"] .dashboard-header, [dir="rtl"] .page-card-header{ direction:rtl; } [dir="rtl"] .card-action-right{ margin-left:0; margin-right:auto; } [dir="rtl"] .card-search i{ left:auto; right:14px; } [dir="rtl"] .card-search input{ padding-left:14px; padding-right:42px; } [dir="rtl"] .card-ribbon{ right:auto; left:-42px; transform:rotate(-45deg); } /* ========================================================== CUSTOM SCROLLBAR ========================================================== */ .card-scroll, .table-card-body{ scrollbar-width:thin; scrollbar-color:var(--primary) transparent; } .card-scroll::-webkit-scrollbar, .table-card-body::-webkit-scrollbar{ width:8px; height:8px; } .card-scroll::-webkit-scrollbar-track, .table-card-body::-webkit-scrollbar-track{ background:transparent; } .card-scroll::-webkit-scrollbar-thumb, .table-card-body::-webkit-scrollbar-thumb{ background:rgba(100,116,139,.45); border-radius:999px; } .card-scroll::-webkit-scrollbar-thumb:hover, .table-card-body::-webkit-scrollbar-thumb:hover{ background:var(--primary); } /* ========================================================== SELECTION ========================================================== */ .card ::selection{ background:rgba(37,99,235,.18); color:inherit; } /* ========================================================== TEXT UTILITIES ========================================================== */ .card-text-center{ text-align:center; } .card-text-start{ text-align:left; } .card-text-end{ text-align:right; } .card-fw-bold{ font-weight:700; } .card-fw-semibold{ font-weight:600; } .card-muted{ color:var(--text-muted); } /* ========================================================== DISPLAY UTILITIES ========================================================== */ .card-block{ display:block; } .card-inline{ display:inline-block; } .card-hidden{ display:none !important; } /* ========================================================== END OF PART 9 ========================================================== */ /* ========================================================== ADMIN CSS FRAMEWORK File : layout/cards.css Part : 10 / 10 Module : Final Utilities • CSS Variables • Effects Version : 3.0.0 Enterprise Author : Enterprise Admin Framework ========================================================== */ /* ========================================================== CARD STATES ========================================================== */ .card-active{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(63,154,214,.12); } .card-disabled{ opacity:.65; pointer-events:none; filter:grayscale(.15); } .card-selected{ border-color:var(--success); box-shadow:0 0 0 3px rgba(22,163,74,.15); } /* ========================================================== BORDER HELPERS ========================================================== */ .border-top-primary{ border-top:4px solid var(--primary); } .border-top-success{ border-top:4px solid var(--success); } .border-top-warning{ border-top:4px solid var(--warning); } .border-top-danger{ border-top:4px solid var(--danger); } .border-top-info{ border-top:4px solid var(--info); } /* ========================================================== CARD BACKGROUND HELPERS ========================================================== */ .bg-card{ background:var(--card-bg); } .bg-card-header{ background:var(--card-header-bg); } .bg-card-footer{ background:var(--card-footer-bg); } .bg-gradient-primary{ background:var(--gradient-primary); color:#fff; } .bg-gradient-success{ background:var(--gradient-success); color:#fff; } .bg-gradient-warning{ background:var(--gradient-warning); color:#fff; } .bg-gradient-danger{ background:var(--gradient-danger); color:#fff; } .bg-gradient-info{ background:var(--gradient-info); color:#fff; } /* ========================================================== ELEVATION ========================================================== */ .elevation-0{ box-shadow:none; } .elevation-1{ box-shadow:var(--shadow-xs); } .elevation-2{ box-shadow:var(--shadow-sm); } .elevation-3{ box-shadow:var(--shadow-md); } .elevation-4{ box-shadow:var(--shadow-lg); } .elevation-5{ box-shadow:var(--shadow-xl); } /* ========================================================== OPACITY ========================================================== */ .opacity-0{ opacity:0; } .opacity-25{ opacity:.25; } .opacity-50{ opacity:.5; } .opacity-75{ opacity:.75; } .opacity-100{ opacity:1; } /* ========================================================== TRANSFORM ========================================================== */ .rotate-2{ transform:rotate(2deg); } .rotate-n2{ transform:rotate(-2deg); } .scale-95{ transform:scale(.95); } .scale-100{ transform:scale(1); } .scale-105{ transform:scale(1.05); } /* ========================================================== TRANSITIONS ========================================================== */ .transition{ transition:all .25s ease; } .transition-fast{ transition:all .15s ease; } .transition-slow{ transition:all .45s ease; } /* ========================================================== GLASS EFFECT ========================================================== */ .glass{ background:rgba(255,255,255,.75); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } /* ========================================================== NEUMORPHISM ========================================================== */ .neumorphism{ background:var(--card-bg); box-shadow: 8px 8px 18px rgba(0,0,0,.08), -8px -8px 18px rgba(255,255,255,.9); } /* ========================================================== HOVER EFFECTS ========================================================== */ .hover-primary:hover{ border-color:var(--primary); } .hover-success:hover{ border-color:var(--success); } .hover-danger:hover{ border-color:var(--danger); } .hover-shadow:hover{ box-shadow:var(--shadow-xl); } .hover-lift:hover{ transform:translateY(-6px); } /* ========================================================== COMMON UTILITIES ========================================================== */ .rounded-full{ border-radius:999px; } .rounded-lg{ border-radius:var(--radius-lg); } .rounded-xl{ border-radius:var(--radius-xl); } .w-fit{ width:fit-content; } .h-fit{ height:fit-content; } .flex-center{ display:flex; align-items:center; justify-content:center; } /* ========================================================== DEBUG ========================================================== */ .debug-card{ outline:2px dashed #ff4d4f; } /* ========================================================== FRAMEWORK END ========================================================== */ /* ██████╗ █████╗ ██████╗ ██████╗ ██╔════╝██╔══██╗██╔══██╗██╔══██╗ ██║ ███████║██████╔╝██║ ██║ ██║ ██╔══██║██╔══██╗██║ ██║ ╚██████╗██║ ██║██║ ██║██████╔╝ ╚═════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═════╝ Enterprise Admin CSS Framework Cards Module v3.0.0 ✔ Responsive ✔ Dark Mode ✔ RTL ✔ Print Support ✔ Skeleton Loader ✔ Dashboard Cards ✔ Profile Cards ✔ Table Cards ✔ Filter Cards ✔ Accessibility ✔ Utility Classes End of File ========================================================== */