/* Banco das Micronações — visual baseado no sistema Basilikos Akti ton Pathros (2012) */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 12px;
    color: #555;
    background: #003399 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="%23003399"/><rect width="2" height="2" fill="%23002e8a"/></svg>');
    min-height: 100vh;
}

a { color: #24478f; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- Top bar */
.topbar {
    width: 420px; margin: 0 auto;
    background: #fff;
    border-radius: 0 0 14px 14px;
    padding: 8px 16px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    position: relative;
}
.topbar .user { color: #333; }
.topbar .user b { color: #000; }
.topbar .close {
    position: absolute; right: 12px; top: 6px;
    background: #cc2222; color: #fff; font-weight: bold;
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    border-radius: 50%; font-size: 11px;
}
.topbar .close:hover { text-decoration: none; background: #a51515; }

/* -------------------------------------------------------------- Logo */
.logo-area { text-align: center; padding: 55px 0 60px; }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo .mark {
    width: 64px; height: 58px; background: #f5c400;
    display: flex; align-items: center; justify-content: center;
    color: #123a8f; font-weight: 900; font-size: 30px;
    font-family: Georgia, serif; letter-spacing: -2px;
}
.logo .word { text-align: left; color: #fff; }
.logo .word .small { font-size: 13px; letter-spacing: 2px; font-weight: bold; }
.logo .word .big {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px; line-height: .95; letter-spacing: 1px;
}
.logo-footer .mark { width: 34px; height: 30px; font-size: 16px; }
.logo-footer .word .small { font-size: 8px; letter-spacing: 1px; }
.logo-footer .word .big { font-size: 20px; }

/* ------------------------------------------------------------- Frame */
.frame {
    width: 820px; max-width: 96%;
    margin: 0 auto; background: #fff;
    border-radius: 10px;
    min-height: 590px;
    display: flex;
    box-shadow: 0 0 18px rgba(0,0,0,.4);
    overflow: hidden;
}

/* ----------------------------------------------------------- Sidebar */
.sidebar { width: 240px; padding: 28px 0 30px 22px; flex-shrink: 0; }
.sidebar h3 {
    font-size: 15px; color: #9a9a9a; font-weight: bold;
    padding: 8px 12px; margin: 14px 0 8px 0;
    background: linear-gradient(to bottom, #fff, #ececec);
    border-radius: 4px 30px 30px 4px;
    box-shadow: 1px 2px 3px rgba(0,0,0,.12);
    width: 92%;
}
.sidebar ul { list-style: none; padding-left: 6px; }
.sidebar li { padding: 4px 0; }
.sidebar li a { color: #8a8a8a; font-size: 12px; }
.sidebar li a:before { content: '›'; color: #f5c400; font-weight: bold; margin-right: 7px; }
.sidebar li a:hover, .sidebar li a.active { color: #333; text-decoration: underline; }

/* ----------------------------------------------------------- Content */
.content { flex: 1; padding: 28px 24px 40px 10px; }
.page-title {
    font-size: 17px; color: #444;
    padding-bottom: 8px; margin-bottom: 16px;
    border-bottom: 2px dotted #ccc;
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.page-title .sub { font-size: 12px; color: #888; font-style: italic; font-weight: bold; }
.page-title .actions { margin-left: auto; font-size: 12px; }
.page-title .actions a { color: #24478f; }

/* -------------------------------------------------------------- Box */
.box { border: 1px solid #d8d8d8; background: #f2f2f2; padding-bottom: 2px; }
.box-header {
    background: linear-gradient(to bottom, #0b2f8a, #06205e);
    color: #fff; font-weight: bold; font-size: 12px;
    padding: 10px 12px;
    display: flex; justify-content: space-between; align-items: center;
}
.box-header input[type=text] {
    border: none; padding: 4px 6px; width: 180px; border-radius: 2px;
}
.box-subheader { background: #7c93cc; color: #fff; padding: 6px 12px; font-size: 11px; }

/* -------------------------------------------------------------- Form */
table.form { width: 100%; border-collapse: collapse; }
table.form tr { border-bottom: 1px solid #e0e0e0; }
table.form tr:nth-child(odd)  td { background: #e8ecf5; }
table.form tr:nth-child(even) td { background: #dde3f0; }
table.form td { padding: 10px 12px; vertical-align: middle; }
table.form td.label { width: 200px; text-align: right; color: #555; font-weight: bold; padding-right: 18px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
    width: 240px; padding: 7px 8px;
    border: 1px dashed #bbb; border-radius: 3px;
    background: #fff; color: #666; font-size: 12px;
    font-family: inherit;
}
input[readonly] { background: #f3efe2; }
select { border-style: solid; }
textarea { width: 320px; }

/* ----------------------------------------------------------- Buttons */
.btn {
    display: inline-block; min-width: 140px; text-align: center;
    background: linear-gradient(to bottom, #ffc21e, #f79b00);
    color: #fff; font-weight: bold; font-size: 12px;
    padding: 9px 20px; margin: 12px 8px 4px 0;
    border: none; border-radius: 3px; cursor: pointer;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
    font-family: inherit;
}
.btn:hover { background: linear-gradient(to bottom, #ffcf4a, #ff8a00); text-decoration: none; }
.btn-danger { background: linear-gradient(to bottom, #e05555, #b52222); }
.btn-danger:hover { background: linear-gradient(to bottom, #ef6b6b, #cc2a2a); }
.btn-sm { min-width: 0; padding: 4px 10px; margin: 0; font-size: 11px; }

/* -------------------------------------------------------------- List */
table.list { width: 100%; border-collapse: collapse; }
table.list th {
    background: #7c93cc; color: #fff; text-align: left;
    padding: 7px 12px; font-size: 11px; font-weight: normal;
}
table.list td { padding: 10px 12px; border-bottom: 1px solid #e2e2e2; }
table.list tr:nth-child(odd)  td { background: #eef1f8; }
table.list tr:nth-child(even) td { background: #e2e7f3; }
table.list tr:hover td { background: #f7f2da; }
.empty { padding: 14px; background: #e8ecf5; color: #777; text-align: center; }

/* ------------------------------------------------------------- Icons */
.status-ok      { color: #2ca62c; font-weight: bold; font-size: 15px; }
.status-pending { color: #f0a000; font-weight: bold; font-size: 15px; }
.status-no      { color: #cc2222; font-weight: bold; font-size: 15px; }
.legend { font-size: 11px; color: #777; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 8px; }
.dot-orange { background: #f0a000; } .dot-gray { background: #999; }
.dot-green { background: #2ca62c; } .dot-red { background: #cc2222; }

/* ------------------------------------------------------------ Flash */
.flash { padding: 9px 12px; margin-bottom: 12px; border-radius: 3px; font-weight: bold; }
.flash.success { background: #e2f4e2; color: #1d701d; border: 1px solid #a9d8a9; }
.flash.error   { background: #f9e2e2; color: #8f1d1d; border: 1px solid #e0a9a9; }
.flash.info    { background: #e2eaf9; color: #1d3f8f; border: 1px solid #a9bce0; }

/* ------------------------------------------------------------ Footer */
.site-footer { text-align: center; padding: 26px 0 34px; color: #fff; font-size: 11px; }
.site-footer .dev { color: #9db3e8; font-size: 10px; margin-top: 3px; }

/* ------------------------------------------------------------- Login */
.login-frame {
    width: 380px; margin: 0 auto; background: #fff;
    border-radius: 10px; padding: 30px 34px 36px;
    box-shadow: 0 0 18px rgba(0,0,0,.4);
}
.login-frame h2 {
    font-size: 16px; color: #444; margin-bottom: 16px;
    padding-bottom: 8px; border-bottom: 2px dotted #ccc;
}
.login-frame label { display: block; color: #666; font-weight: bold; margin: 12px 0 4px; }
.login-frame input, .login-frame select { width: 100%; }
.login-frame .btn { width: 100%; margin-right: 0; }
.login-links { text-align: center; margin-top: 14px; }